.env.development、.env.production、.env.staging

环境变量文件(如 .env.development.env.production.env.staging)用于根据不同的环境(开发、生产、测试等)配置应用程序的行为。

作用

  1. .env.development:用于开发环境的配置。开发人员在本地开发时会使用这个文件中的配置。
  2. .env.production:用于生产环境的配置。应用程序在部署到生产环境时会使用这个文件中的配置。
  3. .env.staging:用于预发布环境的配置。通常用于测试和验证即将发布到生产环境的版本。

如何使用和配置

详细步骤:

1. 创建环境变量文件

在项目的根目录下创建以下文件:

  • .env.development
  • .env.production
  • .env.staging
2. 配置环境变量

在每个文件中添加环境变量。例如:

.env.development

VITE_API_URL=http://localhost:3000/api
VITE_APP_MODE=development

.env.production

VITE_API_URL=https://api.example.com
VITE_APP_MODE=production

.env.staging

VITE_API_URL=https://staging-api.example.com
VITE_APP_MODE=staging
3. 在代码中使用环境变量

在 Vite 项目中,所有以 VITE_ 开头的环境变量都可以在代码中通过 import.meta.env 访问。例如:

console.log(import.meta.env.VITE_API_URL);
console.log(import.meta.env.VITE_APP_MODE);
4. 配置 Vite 以使用不同的环境文件

Vite 会根据 NODE_ENV 环境变量自动加载相应的 .env 文件。你可以通过在启动脚本中设置 NODE_ENV 来指定使用哪个环境文件。

package.json

{"scripts": {"dev": "vite --mode development","build": "vite build --mode production","serve": "vite preview --mode production","staging": "vite build --mode staging"}
}

在上述配置中:

  • npm run dev 会使用 .env.development 文件。
  • npm run buildnpm run serve 会使用 .env.production 文件。
  • npm run staging 会使用 .env.staging 文件。
5. 运行项目

根据需要运行不同的脚本:

  • 开发环境:

    npm run dev
    
  • 生产环境:

    npm run build
    npm run serve
    
  • 预发布环境:

    npm run staging
    

示例项目结构

以下是一个示例项目结构,展示了如何组织和使用环境变量文件:

my-vite-project/
├── .env.development
├── .env.production
├── .env.staging
├── package.json
├── src/
│   ├── main.js
│   └── App.vue
└── vite.config.js

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/46162.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

php获取,昨,今,后天.... 本周,月,年...日期时间戳

时间戳->时间转换工具 时间戳(Unix timestamp)转换工具 - 在线工具 (tool.lu) 代码如下: public function date(){/** 日期 **/// 今天的日期$result[today_date] date("Y-m-d");// 昨天的日期$result[yesterday_date] date("Y-m-d", strtotime(&quo…

Oracle使用fetch first子句报错:ORA-00933 SQL命令未正确结束

问题背景 今天在统计终端厂商告警次数Top10的时候使用SQL查询使用到了fetch first子句,结果执行报错:ORA-00933 SQL命令未正确结束。 报错原因 Oracle数据库中,使用 FETCH FIRST 子句需要启用 Oracle 12c 及以上版本。如果在较低版本的 Or…

【Git使用】管理代码

Git使用 1、git命令1.1、git init1.2、git add1.3、git commit1.4、git push1.5、git branch1.6、git fetch1.7、git checkout X1.8、git status 2、提交执行顺序3、常见错误Error3.1、error: pathspec XXX did not match any file(s) known to git3.2、fatal: not a valid obj…

使机器人在执行任务倒快递

这段代码是用来控制机器人在不同模式下的行为,具体是处理 residenceright 和 residenceleft 两种模式下的过渡过程。代码中使用了一个 mythread 结构体,该结构体包含了机器人的当前模式 (mode) 和过渡过程的阶段 (residenceTransientProcess)。以下是对这…

PyTorch是使用GPU和CPU优化的深度学习张量库——torchvision

torchvision datasets torchvision.datasets 包含了许多标准数据集的加载器。例如,CIFAR10 和 ImageFolder 是其中两个非常常用的类。 CIFAR10 CIFAR10 数据集是一个广泛使用的数据集,包含10类彩色图像,每类有6000张图像(5000张…

C++ 类和对象(上)

再C中,我们使用类定义自己的数据类型。通过定义新的类型来反映待解决的问题中的各种概念,可以使我们更容易编写,调试和修改程序。 类定义格式 首先类的定义格式和结构体差不多,而结构体的那一套语法也可以在C中使用。class是定义…

RC-u3 跑团机器人

这道题目要求我们模拟一个跑团机器人,解析玩家输入的包含骰子掷出和加减法运算的指令,计算出不同种类的骰子分别需要掷出几个,并根据输入指令得到可能的最小结果和最大结果。 题目分析 我们需要解析输入的表达式,处理其中的加法…

oracle数据库的plsql免安装版安装

这个是连接oracle数据库的,注意安装不能有中文路径。以下只是示例。 1、打开D:\ruanjian\plsql\plsql\plsql,发送plsqldev.exe快捷方式到桌面。 2、新弹出的页面填写cancel,什么也不写。 3、将instanceclient解压,并复制文件路径。 修改tool…

[Python学习篇] Python搭建静态web服务器

Python内置的web静态服务器 Python内置的http.server模块可以快速启动一个简单的HTTP服务器。 在Python 3中,打开命令行或终端,在你想要作为静态服务器根目录的文件夹下,运行以下命令: python -m http.server 8000 这将会在…

纯vue+js实现数字0到增加到指定数字动画效果功能

关于数字增加动画效果网上基本上都是借助第三方插件实现的,就会导致有的项目安装插件总会出问题,所有最好使用原生vue+js实现,比较稳妥 纯vue+js实现数字0到增加到指定数字动画效果功能 vue+js 实现数字增加动画功能 效果图 其中,关于数字变化的间隔时间,延时效果都可…

数据结构与算法 —— DFS的定义与原理

DFS(Distributed File System,分布式文件系统)是一种允许网络连接的多个计算机之间共享信息的系统架构。与传统的文件系统(如NTFS、HFS等)不同,DFS分布在多个文件服务器或多个位置,通过计算机网…

澳门建筑插画:成都亚恒丰创教育科技有限公司

澳门建筑插画:绘就东方之珠的斑斓画卷 在浩瀚的中华大地上,澳门以其独特的地理位置和丰富的历史文化,如同一颗璀璨的明珠镶嵌在南国海疆。这座城市,不仅是东西方文化交融的典范,更是建筑艺术的宝库。当画笔轻触纸面&a…

一个spring boot项目的启动过程分析

1、web.xml 定义入口类 <context-param><param-name>contextConfigLocation</param-name><param-value>com.baosight.ApplicationBoot</param-value> </context-param> 2、主入口类: ApplicationBoot,SpringBoot项目的mian函数 SpringBo…

时间序列学习篇

今天看了一些时间序列算法相关的文档和帖子。很惭愧&#xff0c;也是搞了很长时间预测算法的人了&#xff0c;但是都没能详细学习一下时间序列的理论。 首先&#xff0c;要预测一个时序问题&#xff0c;可以从什么路径解决呢&#xff1f;一种是认为过去序列状态影响将来的状态…

视频调整帧率、分辨率+音画同步

# python data_utils/pre_video/multi_fps_crop_sync.pyimport cv2 import os from tqdm import tqdm import subprocess# 加载人脸检测模型 face_cascade cv2.CascadeClassifier(cv2.data.haarcascades haarcascade_frontalface_default.xml)def contains_face(frame):gray …

淘宝/天猫店铺商品搜索利器:taobao.item_search_shop API返回值详解

taobao.item_search_shop 这个API名称听起来像是针对淘宝或天猫平台的一个商品搜索接口&#xff0c;但实际上&#xff0c;淘宝和天猫的官方API体系中并没有直接命名为taobao.item_search_shop的公开API。不过&#xff0c;为了解答关于类似功能的API返回值详解&#xff0c;我们可…

(三)Redis持久化,你真的懂了吗?万字分析AOF和RDB的优劣 AOF的刷盘、重写策略 什么叫混合重写 MP-AOF方案是什么

引言 —— Redis基础概念 Redis概念&#xff1a;Redis (REmote DIctionary Server) 是用 C 语言开发的一个开源的高性能键值对&#xff08;key-value&#xff09;数据库。 为什么会出现Redis呢&#xff1f;它的到来是为了解决什么样的问题&#xff1f; Redis 是一个NOSQL类型…

27 设备流转使用心得 三

前两部分参考心得 25 26 分布式文件传输 1 源端 1 获取分布式文件路径 读取文件 写入分布式文件 2 对端 1 通过应用沙箱获取分布式文件路径 读取文件路径 与状态数据绑定 2 绑定之后UI渲染 Index Row({space:8}){//用户当前选中的所有图片ForEach(this.photos, (p:str…

操作系统真象还原:创建文件系统

14.2 创建文件系统 14.2.1 创建超级块、i结点、目录项 超级块 /** Author: Adward-DYX 1654783946qq.com* Date: 2024-05-07 10:18:02* LastEditors: Adward-DYX 1654783946qq.com* LastEditTime: 2024-05-07 11:24:50* FilePath: /OS/chapter14/14.2/fs/super_block.h* Des…

构造、析构、拷贝(Semantics of Construction,Destruction,and Copy)

1、继承体系下的对象构造 当我定义一个object如下 T object;如果T有一个默认构造函数&#xff0c;它会被调用。 比较不明显的是构造函数内部有大量的隐藏代码&#xff0c;因为编译器会扩充构造函数&#xff0c;一般而言编译器所做的扩充如下&#xff1a; 记录在成员初始化列…