.env文件详解

.env配置文件

vue会根据 process.env.NODE_ENV 的值，自动加载对应的环境配置文件

• .env 全局默认配置文件，在所有的环境中被载入;
• .env.production 生产环境文件 production;
• .env.development 开发环境文件 development；
• .env.test/.env.staging 测试环境/预发布环境文件 test/staging；

配置文件内容

• #注释
• 自定义属性名以VUE_APP_开头，比如VUE_APP_xxx = “变量”

#端口号
port = 8080
# 当前环境
NODE_ENV = 'development'
#ENV = 'development'

# 页面标题
VUE_APP_TITLE = 若依管理系统
 
# 请求基地址
VUE_APP_BASE_API = 'https://ehapi2.erui.com'

# 上传图片的地址
VUE_APP_IMG_API = 'https://file01.ehewon.com'
1
2
3
4
5
6
7
8
9
10
11
12
13
14

process.env

• process.env 是 Node.js 中的一个全局对象，用于获取当前进程的环境变量；
• process.env.xxxx
  

// 获取当前的环境的请求基地址
process.env.VUE_APP_BASE_API
1
2

NODE_ENV

• NODE_ENV 是一个常用的环境变量，用于确定 Node.js 运行时的当前环境；
• process.env.NODE_ENV
• production 生产环境；
• development 开发环境；
• test/staging 测试环境；

if (process.env.NODE_ENV === 'development') {
  // 在开发环境执行的逻辑
} else if (process.env.NODE_ENV === 'production') {
  // 在生产环境执行的逻辑
} else if (process.env.NODE_ENV === 'test') {
  // 在测试环境执行的逻辑
} else {
  // 在其他环境执行的逻辑
}
1
2
3
4
5
6
7
8
9

package.json中的script指令

  "scripts": {
    "dev": "vue-cli-service serve",
    "lint": "eslint --ext .js,.vue src",
    "build:prod": "vue-cli-service build --mode production",
    "build:pre": "vue-cli-service build --mode staging",
    "build:dev": "vue-cli-service build --mode development",
  },
1
2
3
4
5
6
7

npm run 指令 === 执行了对应的命令
npm run dev  ===  vue-cli-service serve
1
2

在package.json文件中的scripts配置

// 默认配置
  "scripts": {
    "dev": "vue-cli-service serve", // 默认读取 .env.development文件，会将process.env.NODE_ENV设置为development；
    "build": "vue-cli-service build", // 默认读取 .env.production文件，会将process.env.NODE_ENV设置为production；
    "test": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  }
1
2
3
4
5
6
7

• 通过传递 - -mode 选项的参数为命令行覆写默认的模式；
  • vue-cli-service --mode dev 指定读取 .env.dev 文件，加载里面的变量；

  "scripts": {
    "build:prod": "vue-cli-service build --mode production",
    "build:pre": "vue-cli-service build --mode staging",
    "build:dev": "vue-cli-service build --mode development",
}
1
2
3
4
5