vue 环境变量配置
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.js
const 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_URL
console.log(process.env.VUE_APP_TEST_URL, 'NODE_ENV')
},
data() {
return {
VUE_APP_TEST_URL: '',
}
},