uniapp 多环境配置（vue.config.js方式，简单上手）

一、需求？

公司要求要用脚手架的方式创建uniapp项目，并可在流水线上自行构建H5版，此时需根据命令打包并切换多环境的api等变量。

二、解决方案

1.首先通过脚手架自行搭建项目后，修改package.json

以下只配置了两种方式：生产和测试环境

"scripts": {
		"serve": "npm run dev:h5",
		"prod": "npm run dev:prod",
		"build": "npm run build:h5",
		"build:test": "cross-env NODE_ENV=development UNI_PLATFORM=h5 vue-cli-service uni-build",
		"build:h5": "cross-env NODE_ENV=production UNI_PLATFORM=h5 vue-cli-service uni-build",
		"dev:h5": "cross-env NODE_ENV=development UNI_PLATFORM=h5 vue-cli-service uni-serve",
		"dev:prod": "cross-env NODE_ENV=production UNI_PLATFORM=h5 vue-cli-service uni-serve",
	},

2.在根目录下创建vue.config.js

以下代码的作用即：在process.env上直接挂载了相关参数，在其他页面上，直接通过process.env即可获取到相关属性。

const webpack = require('webpack')
//npm install uglifyjs-webpack-plugin@1.1.1 --save-dev
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
const config = {
	// chainWebpack 通过链式编程的形式，来修改默认的 webpack 配置(更细粒度的配置)
	chainWebpack: (config) => {
		// 发行或运行时启用了压缩时会生效
		config.optimization.minimizer('terser').tap((args) => {
				const compress = args[0].terserOptions.compress
				// 非 App 平台移除 console 代码(包含所有 console 方法，如 log,debug,info...)
				compress.drop_console = true
				compress.pure_funcs = [
					'__f__', // App 平台 vue 移除日志代码
					'console.debug' // 可移除指定的 console 方法
				]
				return args
			}),
			//根据环境设置相关变量
			config.plugin('define').tap(args => {
				if (process.env.NODE_ENV === 'development') {
					// 测试环境
					args[0]['process.env'].UNI_BASE_API = "'http://a.com.cn/'";
					args[0]['process.env'].UNI_BASE_ENV = "'test'";
					console.log("测试环境");
				} else {
					// 生产环境
					args[0]['process.env'].UNI_BASE_API = "'https://b.com.cn/'";
					args[0]['process.env'].UNI_BASE_ENV = "'prod'";
					console.log("生产环境");
				}
				return args
			})
	},
	// configureWebpack 通过操作对象的形式，来修改默认的 webpack 配置
	configureWebpack: config => {
		if (process.env.NODE_ENV === 'production') {
			// 打包build的时候去掉console的调试信息
			config.optimization.minimizer = [
				new UglifyJsPlugin({
					uglifyOptions: {
						compress: {
							drop_console: true, //console
							drop_debugger: true,
							pure_funcs: ['console.log'] //移除console
						}
					}
				})
			]
			//打包文件大小配置
			config["performance"] = {
				"maxEntrypointSize": 10000000,
				"maxAssetSize": 30000000
			}
		}
	},
	// 测试环境配置跨域，正式环境（服务端或app端无需配置跨域，或让后端配置）忽略此配置
	// 测试环境配置根域名为/api/xxx（接口名称）
	// 生产环境根域名直接为https://b.com.cn/（后端地址）即可
	devServer: {
		proxy: {
				'/api': {
					target: 'https://b.com.cn/',
					ws: true, 
					changeOrigin: true,
					secure:false,
					pathRewrite: {
						'^/api': '',
					}
				}
		},
		disableHostCheck: true
	}

}
module.exports = config