一、vue 环境变量配置

1.1、env.production 和 env.development 文件

env.production 文件是生产环境下的文件.
env.development 文件时开发环境下的文件.

1.2、如果没有创建上面两个文件,默认

npm run serve 运行项目时, process.env.NODE_ENV 的默认值是 development;
npm run build 运行项目时, process.env.NODE_ENV 的默认值是 production;

 "scripts": {
    "serve": "vue-cli-service serve", // 默认 development 开发环境
    "build": "vue-cli-service build",   // 默认 production 生产环境
    "lint": "vue-cli-service lint"
  },

1.3、验证process.env.NODE_ENV环境：

（1） vue.config.js 文件中打印输入 process.env.NODE_ENV
（2）分别运行 npm run serve 和 npm run build ,然后在命令窗口中(或终端)查看打开结果

console.log("process.env:", process.env.NODE_ENV);

image.png image.png

二、通过 .env 文件来配置环境变量

项目运行环境不同,用的环境变量就会不同.
production (生产环境下):项目会使用 .env.production 文件中的环境变量
development (开发环境下):项目会使用 .env.development 文件中的环境变量

注意:.env.production 和 .env.development 文件与 package.json文件同级

2.1、验证通过.env 配置的环境变量

在 package.json 同级文件夹下,生成.env.production 文件和.env.development 文件
在创建的文件夹中分别创建一个环境变量 VUE_APP_BASE_URL
然后通过不同的 命令运行项目,查看环境变量 VUE_APP_BASE_URL 的输出值

注意:vue项目中的环境变量 都要以 VUE_APP_ 开头

2.2、.env.development文件

VUE_APP_BASE_URL = 'https://192.168.212.1:8080/dev'

2.3、.env.production文件

VUE_APP_BASE_URL = 'https://192.168.212.1:8080/prod'

2.4、在vue.config.js打印VUE_APP_BASE_URL

console.log("VUE_APP_BASE_URL:", process.env.VUE_APP_BASE_URL);

2.5、打印结果

image.png
image.png

三、自定义 .env 文件

• 在 package.json 同级文件夹下,生成以 .env.名字 命名的文件
• 在 生成的 .env.名字 的文件中配置环境变量
• 通过 process.env.配置的环境变量,来验证不同的环境中,环境变量的变化

image.png

3.1、.env.dev 文件

VUE_APP_BASE_URL = 'https://192.168.212.1:8080/dev'

3.2、.env.test 文件

VUE_APP_BASE_URL = 'https://192.168.212.1:8080/test'

3.3、 .env.prod 文件

VUE_APP_BASE_URL = 'https://192.168.212.1:8080/prod'

注意：自定义 .env.变量 文件时，package.json 文件中 --mode 变量需要和env后面的变量一致

image.png

3.4、在vue.config.js打印VUE_APP_BASE_URL

console.log("VUE_APP_BASE_URL:", process.env.VUE_APP_BASE_URL);

3.5、打印结果

image.png image.png image.png

3.6、作用

• 在不同的.env 文件中,配置环境变量 NODE_ENV ,然后可以通过 process.env.NODE_ENV 来获取 NODE_ENV 这个环境变量
• 在一个统一的文件中,通过判断 NODE_ENV 的值,来配置不同的 url

// server.js
let baseURL = ''

if (process.env.NODE_ENV == 'dev') baseURL = 'https://192.168.212.1:8080/dev'
if (process.env.NODE_ENV == 'prod') baseURL = 'https://192.168.212.1:8080/prod'
if (process.env.NODE_ENV == 'test') baseURL = 'https://192.168.212.1:8080/test'
export baseURL