2018-05-18 Vue-cli配置多环境

需要本地安装cross-env
cnpm install --save-dev cross-env
1.修改build文件夹中的build文件
// const spinner = ora('building for production...')
const spinner = ora('building for ' + process.env.NODE_ENV + ' of ' + process.env.env_config + ' mode...')
修改这里是为了可以在打包时显示当前打包的是哪个环境，其中的env_config就是package.json文件中的env_config

当前打包环境.png

2.修改build文件夹中的webpack.prod.config文件(重点！)
// const env = require('../config/prod.env')
const env = config.build[process.env.env_config]
这里是为了添加不同的env.js文件
3.在config文件夹中新建temp.env.js文件，格式和prod.env.js一样
'use strict' module.exports = { NODE_ENV: '"temp"', API_HOST: '"http://10.153.89.6:8080"' }
这里注意一定是单引号包裹双引号
其中的NODE_ENV就是package.json文件中的NODE_ENV
4.修改config文件夹中的index文件
build: { // 添加不同的环境 prod: require('./prod.env'), temp: require('./temp.env'), // Template for index.html index: path.resolve(__dirname, '../dist/index.html'), ... }
不同环境的打包都和官方的build相同，只是接口不同
5.修改package.json文件
"scripts": { "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js", "build:prod": "cross-env NODE_ENV=production env_config=prod node build/build.js", "temp": "cross-env NODE_ENV=temp env_config=temp node build/build.js", "start": "npm run dev", "lint": "eslint --ext .js,.vue src", "build": "cross-env NODE_ENV=production env_config=prod node build/build.js" }
其中build:prod和官方的build效果一样
而temp就是我们新创建的一个环境，这里的env_config要和config文件夹中的index文件中的环境名一样，NODE_ENV要和对应的env.js文件中的NODE_ENV相同，cross-env则是我们安装的插件

end