vue-cli + webpack 实现开发、测试、生产多环境打包切换

1、在build文件夹下新建test.js，内容复制同级目录下的build.js，修改两个地方

 1 'use strict'
 2 require('./check-versions')()
 3 // 修改1
 4 process.env.NODE_ENV = 'test'
 5 const ora = require('ora')
 6 const rm = require('rimraf')
 7 const path = require('path')
 8 const chalk = require('chalk')
 9 const webpack = require('webpack')
10 const config = require('../config')
11 // 修改2
12 const webpackConfig = require('./webpack.test.conf')

2、在build文件夹下新建webpack.test.conf.js，内容复制同级目录下的webpack.prod.conf.js，修改一个地方

 1 'use strict'
 2 const path = require('path')
 3 const utils = require('./utils')
 4 const webpack = require('webpack')
 5 const config = require('../config')
 6 const merge = require('webpack-merge')
 7 const baseWebpackConfig = require('./webpack.base.conf')
 8 const copyWebpackPlugin = require('copy-webpack-plugin')
 9 const HtmlWebpackPlugin = require('html-webpack-plugin')
10 const ExtractTextPlugin = require('extract-text-webpack-plugin')
11 const OptimizeCssplugin = require('optimize-css-assets-webpack-plugin')
12 const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
13 // 修改
14 const env = require('../config/test.env')

3、在config 文件夹下新建test.env.js，内容复制同级目录下的prod.env.js，修改一个地方

　　注意：《单引号》《双引号》

1 'use strict'
2 module.exports = {
3   // 修改
4   NODE_ENV: '"test"'
5 }

4、编辑build文件夹下webpack.base.conf.js，修改一个地方

1 output: {
2   path: config.build.assetsRoot,
3   filename: '[name].js',
4   // 修改
5   publicPath: process.env.NODE_ENV === 'production' || process.env.NODE_ENV === 'test'
6     ? config.build.assetsPublicPath
7     : config.dev.assetsPublicPath
8 }

5、编辑build文件夹下utils.js，修改一个地方

1 exports.assetsPath = function (_path) {
2   // 修改
3   const assetssubdirectory = process.env.NODE_ENV === 'production' || process.env.NODE_ENV === 'test'
4     ? config.build.assetssubdirectory
5     : config.dev.assetssubdirectory
6  
7   return path.posix.join(assetssubdirectory, _path)
8 }

6、编辑config 文件夹下index.js，修改两个地方

 1 build: {
 2     // 修改1
 3     index: process.env.NODE_ENV === 'test' ? path.resolve(__dirname, '../test/index.html') : path.resolve(__dirname, '../dist/index.html'), // 线上测试环境和线上正式环境入口文件路径区分
 4     // 修改2
 5     assetsRoot: process.env.NODE_ENV === 'test' ? path.resolve(__dirname, '../test') : path.resolve(__dirname, '../dist'), // 线上测试环境和线上正式环境打包后文件区分
 6     assetssubdirectory: 'static',
 7     assetsPublicPath: './',
 8     productionSourceMap: true,
 9     devtool: '#source-map',
10     // npm install --save-dev [email protected]
11     productionGzip: true,
12     productionGzipExtensions: ['js', 'css'],
13     bundleAnalyzerReport: process.env.npm_config_report
14   }

7、编辑package.json文件，修改三处

1 "scripts": {
2   "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
3   // 打正式包，打包后文件在dist文件夹下
4   "build:prod": "node build/build.js",
5   // 打测试包，打包后文件在test文件夹下
6   "build:test": "node build/test.js",
7   // 打正式包和测试包
8   "build": "npm run build:prod && npm run build:test"
9 }

8、打包时运行npm run build即可打测试包和正式包。如果只需要测试包，则执行npm run build:test；如果只需要正式包，则执行npm run build:prod

9、那么，在Nginx配置代理的时候，测试服务器应该代理到test/文件夹，正式服务器应该代理到dist/文件夹。在开发的时候，可以用process.env.NODE_ENV的值来判断运行环境：开发环境development、测试环境test、生产环境production。而不应该通过location.hostname来判断运行环境了。

vue-cli + webpack 实现开发、测试、生产多环境打包切换

相关推荐