接下来要将动态加载的环境文件丢到webpack的配置文件中，由于webpack.dev.conf.js和webpack.prod.conf.js都是继承自webpack.base.conf.js，所以我们直接改写wepack.base.conf.js的插件配置部分，直接添加DefinePlugin插件的配置，并去掉原配置文件该插件的配置：
/* /build/webpack.base.conf.js */ // 引入上面的webpack.env.conf模块 const envConfig = require('./webpack.env.conf') module.exports = { ... , // 配置DefinePlugin插件 plugins: [ // new webpack.DefinePlugin({ 'process.env': envConfig }) ], ... }
然后调试/打包的命令还是用回默认生成的命令，只不过在命令后面传入环境参数：
/* /package.json */ "scripts": { "start:dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --e dev", "start:test": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --e test", "start:pre": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --e pre", "start:prod": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --e prod", "build:dev": "node build/build.js --e dev", "build:test": "node build/build.js --e test", "build:pre": "node build/build.js --e pre", "build:prod": "node build/build.js --e prod", }
我们的环境配置文件中的内容可以是这样的：
/* /config/test.env.js */ 'use strict' const merge = require('webpack-merge') const prodEnv = require('./prod.env') module.exports = merge(prodEnv, { NODE_ENV: '"test"', API_HOST: '"http://test.xx.com:8080"' })
然后我们就可以在源码中使用process.env.NODE_ENV来获取我们配置的环境变量的值，甚至可以单独抽离一个api模块：
/* /src/api/index.js */ const API_HOST = process.env.API_HOST; export default { api1: `${API_HOST}/path/to/api1`, api2: `${API_HOST}/path/to/api2` }
最后，在我们的Vue组件中就可以很方便的使用这些环境配置了：
/* /src/components/HelloWorld.vue */ import api from '@/api'; data () { return { msg: 'Welcome to Your Vue.js App', env: process.env.NODE_ENV, api1: api.api1, api2: api.api2 } }
4、总结
整个流程下来，我们添加了一个webpack.env.conf.js模块，稍微小修改了一下vue-cli生成的3个webpack配置文件，并在config目录下添加了各个环境的配置文件，项目的结构是这样子的：
目录结构
最终在页面上看到的是这样子的：
