vue配置多环境

vue配置多环境

比如我要配置一个测试环境用的
1.在config文件夹里，新建一个test.env.js（自定义名字）
内容为：

'use strict'
module.exports = {
	NODE_ENV: '"production"',   // 生产环境
	API_HOST: '"http://地址"'   //测试的生产环境地址
}

2.在package.json中 script标签里加上一句

"build:test": "cross-env NODE_ENV=production env_config=test node build/build.js"

当执行npm run build:test命令时，执行config文件里面test.env.js文件

3.安装cross-env依赖包：

cnpm install cross-env

4.在使用vue-cli时，npm run build命令是默认执行prod(生产环境)，所以执行npm run build命令没有运行测试环境。
在build文件夹里的webpack.prod.conf.js文件：
原来的env是引入prod.env:
// const env = require(’…/config/prod.env’)
修改为：

const env = require ('../config/' + process.env.env_config + '.env')

5.使用npm run build:test命令打包成功，由于将原本固定的prod.env修改为动态的，所以执行npm run build命令会报错，因为在package.json中原有的script中build写的执行文件直接是build.js,指向的是原来的prod.env.js文件。
“build”: “node build/build.js”,
需要修改为：

"biuld": "cross-env NODE_ENV=production env_config=prod node build/build.js",

跟build:test不同的是 node_env需要指向config中的文件名称，与之对应的是env_config的名字。
6.build.js中有一段描述：
const spinner = ora(‘building for prod…’)
修改为：

const spinner = ora('building for ' + process.env.env_config);