vue常用多环境配置

vue/cli 常用的前端多环境配置

1、新建三个文件

// 文件名 .env.development
NODE_ENV = development
# 开发环境的ip端口
VUE_APP_BASE_API = 'http://xxxx:8080'


// 文件名 .env.production
# 生产环境的ip端口
VUE_APP_BASE_API = 'http://yyyy:8080'


// 文件名 .env.test
# 测试环境的ip端口
VUE_APP_BASE_API = 'http://zzzz:8080'

2、配置package.json文件

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

// 命令
// 开发环境运行, 对应的ip是.env.development中的ip
npm run serve
// 测试环境， 对应的是.env.test中的ip
npm run test // 运行
npm run build:test // 打包
// 生产环境打包，对应的是env.production中的ip
npm run build
// 

3、检测是否配置成功

console.log(process.env)
/*
{
	BASE_URL: "/"
	NODE_ENV: "development", // 当前运行环境
	VUE_APP_BASE_API: "http://xxxx:8080" // 对应的请求ip
}
*/