在项目完成后,后期维护阶段往往需要对项目不断进行功能扩充,这个过程中就需要支持内测版本和发布版本分开进行调试或打包。这里的内测版本是指:包含所有已经完成或正在开发中的功能;发布版本是指:仅仅所有已经完成的功能;
初始化一个webpack的Vue项目,vue init webpack my-project
,生成如下文件:
![](https://i-blog.csdnimg.cn/blog_migrate/54e12f287f07611b01be74b1ff702cc2.png)
npm run start:dev //调试dev版本
npm run start:prod //调试prod版本
npm run build:dev //打包dev版本
npm run build:prod //打包prod版本
1、创建build/webpack.env.conf.js
用于获取命令行中env参数
的值,设置打包编译时调用对应的版本。
安装npm install yargs --dev --save
,通过yargs
可以方便的获取指定名称的命令行参数。
// 定义参数配置
const argv = require('yargs').argv;
// 获取环境变量
const env = argv.env;
//process.stdout.write('the env is ' + env + '\n');
// require指定的环境配置文件
const envConfigFile = "../config/" + env + ".env.js";
//process.stdout.write('the env config file is ' + envConfigFile + '\n');
// 将require的配置文件原封不动export回出去
module.exports = require(envConfigFile);
2、修改wepack.base.conf.js
由于webpack.dev.conf.js
和webpack.prod.conf.js
都是继承自webpack.base.conf.js
,所以我们直接改写wepack.base.conf.js
的插件配置部分。
- 简单的来说就是DefinePlugin插件会将我们源码中所有出现的指定字符串替换为我们提供的对象/字符串,不同环境的配置文件则放在/config目录下。
// 引入上面的webpack.env.conf模块
const envConfig = require('./webpack.env.conf')
module.exports = {
...
,
// 配置DefinePlugin插件
plugins: [
// http://vuejs.github.io/vue-loader/en/workflow/production.html
new webpack.DefinePlugin({
'process.env': envConfig
})
],
...
}
3、修改webpack.dev.conf.js和webpack.prop.conf.js
由于webpack.dev.conf.js
和webpack.prop.conf.js
这两个文件,都采用merge方法继承了wepack.base.conf.js
中的plugins
属性,所以自身就不用再设置,否则会覆盖base
中的设置,所有找到dev.conf
和prod.conf
中的new webpack.DefinePlugin
,将其注释掉。webpack.dev.conf.js文件
plugins: [
// new webpack.DefinePlugin({
// 'process.env': require('../config/dev.env')
// }),
new webpack.HotModuleReplacementPlugin(),
new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
new webpack.NoEmitOnErrorsPlugin(),
webpack.prod.conf.js文件
plugins: [
// http://vuejs.github.io/vue-loader/en/workflow/production.html
// new webpack.DefinePlugin({
// 'process.env': env
// }),
new UglifyJsPlugin({
uglifyOptions: {
compress: {
warnings: false
}
},
4、修改package.json
"scripts": {
"start:debug": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --env dev",
"start:prod": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --env prod",
"build:debug": "node build/build.js --env dev",
"build:prod": "node build/build.js --env prod"
},
5、组件中调用当前环境值
执行npm run build:prod
,则可以在组件任意代码中通过process.env.NODE_ENV
,取到环境变量值:prod
备注:如果版本不止
dev
和prod
两个,还有dev2
、dev3
、dev4
等等,那也很好处理,只需要复制dev.env.js
,修改NODE_ENV
属性;再修改package.json
就行。
//dev2.env.js
'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')
module.exports = merge(prodEnv, {
NODE_ENV: '"dev2"'
})
//package.json
"scripts": {
"start:dev2": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --env dev2",
"build:dev2": "node build/build.js --env dev2"
},
如果想要把不同的版本打包到不同的目录中,如下操作:
- 修改
config/index.js
,修改build
那一部分的代码,其他不变
const envConfig = require('../build/webpack.env.conf')
module.exports = {
dev:{...},
build: {
//如果需要通过打包不同的环境变量,打包到不同的文件夹可以这样写
index: path.resolve(__dirname, '../dist_' + eval(envConfig.NODE_ENV) + '/main.html'),
assetsRoot: path.resolve(__dirname, '../dist_' + eval(envConfig.NODE_ENV)),
// Template for index.html
//index: path.resolve(__dirname, '../dist/index.html'),
// Paths
//assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: '/',
- 修改
build/build.js
'use strict'
require('./check-versions')()
// process.env.NODE_ENV = 'production'//注释掉
const ora = require('ora')
const rm = require('rimraf')
参考:Webpack下多环境配置的思路vue分别打包测试环境和正式环境理解webpack之process.env.NODE_ENV详解(十八)