vue项目设置环境变量

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