测试环境、本地环境、正式环境、阶段性提交环境同时并存，是否已经厌烦了这种每次需要改代码的配置和地址方式？
先上效果图
第一套启动环境
第一套部署环境
第二套启动环境
第二套部署环境
ok，到现在，你应该知道我说的是什么，最后的配置效果是什么了。
现在开始进行文件配置
插件安装
配置使用了cross-env插件，所以，先安装此插件
npm install --save-dev cross-env 或者cnpm 安装 cnpm install --save-dev cross-env
文件配置
1、package.json
"scripts": {
"dev": "cross-env BABEL_ENV=development env_config='dev' webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"dev:sit": "cross-env BABEL_ENV=development env_config=sitEnv webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"build": "cross-env NODE_ENV=production env_config=prod node build/build.js",
"build:sit": "cross-env NODE_ENV=production env_config=sit node build/build.js"
},
2、webpack.dev.conf.js
new webpack.DefinePlugin({
//注释掉之前的路径，修改为动态获取路径
// 'process.env': require('../config/dev.env')
'process.env': require('../config/' + process.env.env_config + '.env')
}),
3、webpack.prod.conf.js
//注释掉之前的路径，修改为动态获取路径
// const env = require('../config/prod.env')
const env = require('../config/' + process.env.env_config + '.env')
4、dev.env.js
'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')
module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
//添加了一个name，进行页面的区分，此添加可有可无
name:'"dev"'
})
5、prod.env.js
'use strict'
module.exports = {
NODE_ENV: '"production"',
//此页面标识，必须！！！
ENV_CONFIG:'"prod"',
//添加了一个name，进行页面的区分，此添加可有可无
name:'"prod"',
//添加了一个BASE_API，进行后端接口路径的修改，此添加可有可无
BASE_API: '"http://22222222222222.com"'
}
6、sitEnv.env.js在config文件下新增的js
'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./sitEnv.env')
module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
//添加了一个page，进行页面的区分，此添加可有可无
'page':'"sit"'
})
7、sit.env.js,在config文件下新增的js
'use strict'
module.exports = {
NODE_ENV: '"production"',
//此页面标识，必须！！！
ENV_CONFIG: '"sit"',
//添加了一个name，进行页面的区分，此添加可有可无
name: '"sit"',
//添加了一个BASE_API，进行后端接口路径的修改，此添加可有可无
BASE_API: '"http://111111111111111.com"'
}
8、App.vue
<template>
<div id="app">
<img src="./assets/logo.png">
<router-view/>
</div>
</template>
<script>
export default {
name: 'App',
mounted(){
//打印了环境变量（是本地启动环境还是部署dist包环境）
console.log(process.env.NODE_ENV)
//各种标识对象查看
console.log(process.env)
},
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
ok，到此，修改已经完成了。
然后就可以使用命令（看你的package.json文件里面定义的是什么，例如上面栗子里面的变量）
npm run dev
npm run dev:sit
npm run build
npm run build:sit
GitHub（gayHub体验地址）
工具始终是工具
作为一个普通的前端工程师最重要的是什么呢？
编程思想（70%失业）？
数学优异（60%失业）？
反应敏捷（50%失业）？
会使用Ctrl+c和Ctrl+v（99%有工作）！
ok，是什么不需要我说了吧。
闲话
复制虽然爽，但是不要忘记自己仍旧是靠技术吃饭的，终有一天是会放下技术进行转行或者是一线码农编程二线或者产品甚至在家待业。但是，在你没有到那一天前，你仍旧是靠技术吃饭的。
所以，不要忘记继续努力学习。
最后，送一句话给大家，这是18年一个乐观的漂亮姐姐（老ling）发的朋友圈。
我们终此一生，就是要摆脱他人的期待，找到真正的自己。——《无声告白》
