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

Posted 2021-05-12 等风来灬

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 compression-webpack-plugin@1.12.0
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来判断运行环境了。