一、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
