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

转载已于 2025-04-09 09:40:55 修改 · 496 阅读

3 ·

CC 4.0 BY-SA版权

原文链接：https://blog.csdn.net/daoshen1314/article/details/140403262

文章标签：

#前端

于 2025-04-09 09:28:07 首次发布

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

作用

.env.development：用于开发环境的配置。开发人员在本地开发时会使用这个文件中的配置。
.env.production：用于生产环境的配置。应用程序在部署到生产环境时会使用这个文件中的配置。

.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 build 和 npm 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

.env.development、.env.production、.env.staging-CSDN博客

【前端配置篇】vue项目之.env系列文件配置详解：.env文件配置全局环境变量-腾讯云开发者社区-腾讯云

♈️.env 文件配置

1️⃣ 文件说明

.env：全局默认配置文件，无论什么环境都会加载合并。

.env.development：开发环境的配置文件

.env.production：生产环境的配置文件

注意：三个文件的文件名必须按上面方式命名，不能乱起名，否则读取不到文件。

2️⃣ 内容格式

注意：属性名必须以 VUE_APP_ 开头，如：VUE_APP_XXX

3️⃣ 加载

vue 会根据启动命令自动加载相对应的环境配置文件。vue是根据文件名进行加载的，所以上面说“不要乱起名，也无需专门控制加载哪个文件”

比如执行npm run serve命令，会自动加载.env.development文件

开发环境加载 .env 和 .env.development 。

生成环境加载 .env 和 .env.production 。

运行npm run serve的时候主要还是看package.json中 server属性的--mode后面跟的是啥。如果是development，就会加载.env.development文件。

在package.json里面配置好，执行serve的时候用开发环境的。build打包用生产或者测试的

package.json 配置项： 二选一

代码语言：javascript

代码运行次数：0

运行

AI代码解释

"scripts": {
    "serve": "vue-cli-service serve --mode development",
    "build": "vue-cli-service build",
    "build:sit": "vue-cli-service build --mode production.sit",
    "build:uat": "vue-cli-service build --mode production.uat",
    "build:prod": "vue-cli-service build --mode production",
    "lint": "vue-cli-service lint",
    "et": "node_modules/.bin/et",
    "et:init": "node_modules/.bin/et -i",
    "et:list": "gulp themes"
  }

代码语言：javascript

代码运行次数：0

运行

AI代码解释

"scripts": {
    "serve-test": "vue-cli-service serve --open --mode test",
    "serve": "vue-cli-service serve --open --mode development",
    "dev": "vue-cli-service  --open --mode development  serve",
    "test-oss": "vue-cli-service  --mode sit  build",
    "build:sit": "vue-cli-service  --mode sit  build",
    "build:prod": "vue-cli-service  --mode production  build",
    "lint": "vue-cli-service lint",
    "fix": "tslint --fix -c ./tslint.json 'src/**/*{.ts,.tsx}'"
 }

.env.development的文件。在地址上面一行加一个NODE_ENV=development

4️⃣ 优先级

环境配置文件 > 全局配置文件

当全局的配置文件和环境的配置文件有相同配置项时，环境的配置项会覆盖全局的配置项

如：

开发环境

打印 process.env 属性（全局属性，任何地方均可使用）：

从上面图片中可知，.env 中的全局属性 VUE_APP_PREVIEW 与 VUE_APP_API_BASE_URL 被覆盖。 .env 中的全局属性 VUE_APP_AGE 被保留。

5️⃣ 项目中的使用

在配置文件中定义的属性在其它文件中如何访问呢？？

可以使用 process.env.xxx 来访问属性。

如：

https://blog.csdn.net/tomtomgogo/article/details/135431359

本文介绍了在项目开发中如何使用不同环境变量文件（.env.development,.env.starting,.env.production）来管理开发、测试和生产环境的配置。强调了环境变量接口命名规范和如何通过npm命令行切换环境，以及为何`build:stage`需要特定标志以避免与`build:prod`冲突

项目开发时，关于环境变量文件我们可以看到以下3个文件：

.env.development:开发环境变量文件

.env.starting:测试环境变量文件

.env.production:生产环境变量文件（正式环境）

对应不同的开发需求需要用到不同的环境变量，每个环境的数据是独立的，开发环境不能看到测试环境和生产环境，反之也一样。例如：数据的独立性要求面对不同开发需求需要调整为对应的接口（虽然代码是一样的），这就要求项目需要有切换接口的能力。

现在对应不同的环境需要调整不同的接进行开发：

开发环境：http://dev.itcast.cn

测试环境：http://test.itcast.cn

生产环境：http://prod.itcast.cn

现在需要将地址对应配置到环境变量文件中，如图：

（tips:这里需要注意：环境变量接口需要以“VUE_APP_”开头作为属性名，否则无法被客户端代码src读取。）

关于环境变量显示的结果是什么呢？这里在mai.js文件中打印看看~

（tips：获取环境变量的值固定语法 process.env.环境变量名）

打印后发现：环境变量是一个对象，对象中包含当前环境的环境配置文件相关信息（当前是开发环境则显示NODE_ENV: "development"，读取环境为development的环境变量值）。“BASE_URL”和“NODE_ENV”是文件内置的两个变量，所以会一并被读取。

那怎么切换不同的路径呢？通过运行package.json文件中不同命令运行不同环境。

npm run dev -----自动读取.env.development文件

npm run build:prod-----自动读取.env.production文件

npm run build:stage-----自动读取.env.staging文件

tips:打包命令后面跟一个参数“---mode 参数”，可以指定要读取的环境变量文件（如"build:stage": "vue-cli-service build --mode staging",当运行npm run build:stage时，会指定读取.env.starting环境变量文件）

为什么只有"build:stage": "vue-cli-service build --mode staging"后面需要跟--mode staging呢？因为"build:prod"&"build:stage"会执行相同的命令"vue-cli-service build"，则会读取相同的变量文件。为了区分，需要在"build:stage": "vue-cli-service build --mode staging"添加--mode staging。

原文链接：https://blog.csdn.net/tomtomgogo/article/details/135431359