一.vue-cli3构建的项目(以测试环境为例) 环境变量官方入口
1.在根目录创建.env.test文件, .env.[mode] # 只在指定的模式中被载入
如图:
内容如下:
VUE_APP_xx 自定义的变量,NODE_ENV - 会是 “development”、“production” 或 “test”
中的一个。具体的值取决于应用运行的模式
NODE_ENV='production' //表明这是生产环境(需要打包)
VUE_APP_BASEURL='https://www.xxxx.com' // 测试服务器地址
2.修改package.json,在scripts添加一行命令
"build:test": "vue-cli-service build --mode test"
3.通过环境变量改变baseUrl
const baseUrl = process.env.VUE_APP_BASEURL
4.当需要为测试环境进行打包的时候 , 我们只需要运行下面指令进行打包
npm run build:test
二.vue-cli2构建的项目
1.安装依赖:npm i -D cross-env或npm i -D cross-env
2.在package.json中的scripts新增修改为
tip:PATH_ENV 是可以自定义名称的,随意修改为你想要的
"scripts": {
"dev": "cross-env PATH_ENV=test webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"build:test": "cross-env PATH_ENV=test node build/build.js",
"build:prod": "cross-env PATH_ENV=prod node build/build.js"
},
3 在config/prod.env.js里面添加
'use strict'
let PATH_ENV = '"test"'
if (process.env.PATH_ENV === 'test'){
PATH_ENV = '"test"'
}else if(process.env.PATH_ENV === 'prod'){
PATH_ENV = '"prod"'
}
module.exports = {
NODE_ENV: '"production"',
PATH_ENV
}
4.通过环境变量改变baseUrl
let baseUrl= "http://xxx.test.cn/api"; //测试
if (process.env.PATH_ENV === 'test'){
baseUrl = "http://xxx.test.com/api"; //测试
else if(process.env.PATH_ENV === 'prod'){
baseUrl = "http://xxx.prod.com/api"; //正式
}
5.当需要为测试环境进行打包的时候 , 我们只需要运行下面指令进行打包
npm run build:test