在項目完成后，后期維護(hù)階段往往需要對項目不斷進(jìn)行功能擴(kuò)充朵逝，這個過程中就需要支持內(nèi)測版本和發(fā)布版本分開進(jìn)行調(diào)試或打包蹂午。這里的內(nèi)測版本是指：包含所有已經(jīng)完成或正在開發(fā)中的功能；發(fā)布版本是指：僅僅所有已經(jīng)完成的功能钦幔；
初始化一個webpack的Vue項目,vue init webpack my-project,生成如下文件：
我們要實現(xiàn)的目標(biāo)是，執(zhí)行以下命令常柄，能夠直接調(diào)試或者打包指定的版本
npm run start:dev //調(diào)試dev版本
npm run start:prod //調(diào)試prod版本
npm run build:dev //打包dev版本
npm run build:prod //打包prod版本
1节槐、創(chuàng)建build/webpack.env.conf.js
用于獲取命令行中env參數(shù)的值，設(shè)置打包編譯時調(diào)用對應(yīng)的版本拐纱。
安裝npm install yargs --dev --save,通過yargs可以方便的獲取指定名稱的命令行參數(shù)。
// 定義參數(shù)配置
const argv = require('yargs').argv;
// 獲取環(huán)境變量
const env = argv.env;
//process.stdout.write('the env is ' + env + '\n');
// require指定的環(huán)境配置文件
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插件會將我們源碼中所有出現(xiàn)的指定字符串替換為我們提供的對象/字符串咆蒿，不同環(huán)境的配置文件則放在/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屬性缭黔，所以自身就不用再設(shè)置，否則會覆蓋base中的設(shè)置蒂破，所有找到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惧互、組件中調(diào)用當(dāng)前環(huán)境值
執(zhí)行npm run build:prod,則可以在組件任意代碼中通過process.env.NODE_ENV,取到環(huán)境變量值：prod
備注：如果版本不止
dev和prod兩個，還有dev2喇伯、dev3喊儡、dev4等等，那也很好處理稻据，只需要復(fù)制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: {
//如果需要通過打包不同的環(huán)境變量，打包到不同的文件夾可以這樣寫
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下多環(huán)境配置的思路
vue分別打包測試環(huán)境和正式環(huán)境
理解webpack之process.env.NODE_ENV詳解(十八)
