vue 环境变量配置

参考文章@一颗小芹菜的日常
参考文章2@sunshineG

env.production 和 env.development 文件

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

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

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"},

验证(process.env.NODE_ENV)环境：

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

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

项目运行环境不同,用的环境变量就会不同.

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

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

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

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

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

// .env.production文件
VUE_APP_BASE_URL = 'https://192.168.212.1:8080/prod'
// .env.development文件
VUE_APP_BASE_URL = 'https://192.168.212.1:8080/dev'

自定义 .env 文件

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

注意:

自定义 .env.变量 文件时, package.json 文件中 --mode 变量,变量需要一致

serve:名字 ,这个名字可以随便起

"scripts": {"serve": "vue-cli-service serve","serve:dev": "vue-cli-service serve --mode dev","serve:prod": "vue-cli-service serve --mode prod","serve:test": "vue-cli-service serve --mode test","build": "vue-cli-service build","build:dev": "vue-cli-service build --mode dev","build:prod": "vue-cli-service build --mode prod","build:test": "vue-cli-service build --mode test","lint": "vue-cli-service lint"},

// .env.dev 文件
VUE_APP_BASE_URL = 'https://192.168.212.1:8080/dev'
// .env.prod 文件
VUE_APP_BASE_URL = 'https://192.168.212.1:8080/prod'
// .env.test 文件
VUE_APP_BASE_URL = 'https://192.168.212.1:8080/test'

最后的方法

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

// .env.dev 文件
NODE_ENV = 'dev'
// .env.prod 文件
NODE_ENV = 'prod'
// .env.test 文件
NODE_ENV = 'test'// server.jsconst dev = process.env
let baseURL = ''if (dev.NODE_ENV == 'dev') baseURL = 'https://192.168.212.1:8080/dev'
if (dev.NODE_ENV == 'prod') baseURL = 'https://192.168.212.1:8080/prod'
if (dev.NODE_ENV == 'test') baseURL = 'https://192.168.212.1:8080/test'

vue2.0 在页面中使用process获取全局路径的时候报错 process is not defined

解决办法

在data中声明一个变量用来接收 process.env.变量
在 created 或 mounted 生命周期函数中对data中声明的变量进行赋值。
在需要用的环境变量的地方使用赋值后 data 中的变量。

参考文章@飞尽堂前燕

template 部分：<iframe class="iframeTag" :src="VUE_APP_TEST_URL"></iframe>javascript 部分：
created() {this.VUE_APP_TEST_URL = process.env.VUE_APP_TEST_URLconsole.log(process.env.VUE_APP_TEST_URL, 'NODE_ENV')},data() {return {VUE_APP_TEST_URL: '',}},