vue-cli3分环境打包配置

概述

在项目开发过程中一般会分为三种运行环境：开发环境、测试生产环境、正式生产环境，不同的环境在配置上的要求会有所不同，最简单的例子就是不同的环境对后端的接口请求地址不同。

打包过程中因需区分不同的运行环境而经常要手动去修改配置，这是一项枯燥且没有技术含量的工作，对于这种能用工具解决的工作就不要去人肉操作了，就算避免不了人肉操作，但也尽量让它来得简单点，比如输入不同命令就自动打不同环境的包。

接下来主要讲解在vue-cli3项目中怎么解放人肉配置打包，利用工程化和自动化提高打包效率。

第一步：创建配置文件

在项目根目录创建3个配置文件
.env.development 开发模式打包(运行命令 npm run serve 默认读取的配置)
.env.production 正式生产模式打包(运行命令 npm run build 默认读取的配置)
.env.alpha 测试生产模式打包(运行命令 npm run build --mode alpha 需要读取的配置)

注：vue-cli3内置了.env.development与.env.production默认配置，打包会合并它们的新增配置

.env.development

NODE_ENV = 'development'
VUE_APP_TITLE = 'development'
VUE_APP_BASE_URL = 'http://development.lihefei.com:8080'
VUE_APP_WEBSOCKET_URL = 'ws://development.lihefei.com:21000'

.env.production

NODE_ENV = 'production'
VUE_APP_TITLE = 'production'
VUE_APP_BASE_URL = 'http://lihefei.com:8080'
VUE_APP_WEBSOCKET_URL = 'ws://lihefei.com:21000'

.env.alpha

NODE_ENV = 'production'
VUE_APP_TITLE = 'alpha'
VUE_APP_BASE_URL = 'http://alpha.lihefei.com:8080'
VUE_APP_WEBSOCKET_URL = 'ws://alpha.lihefei.com:21000'
outputDir = 'alpha'

属性说明：
NODE_ENV = development 开发环境
NODE_ENV = production 生产环境

VUE_APP_TITLE = development 开发模式打包
VUE_APP_TITLE = alpha 测试生产模式打包
VUE_APP_TITLE = production 正式生产模式打包

VUE_APP_BASE_URL 后端常规业务接口地址(自定义)
VUE_APP_WEBSOCKET_URL 后端websocket推送接口地址(自定义)

outputDir 打包输出目录名称(.env.development与.env.production有默认配置可以省略该项)

第二步：修改package.json

在scripts中新增命令："alpha": "vue-cli-service build --mode alpha"

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "alpha": "vue-cli-service build --mode alpha"
}

第三步：新建process-env.js获取接口地址

这个文件的作用是获取到process.env自定义的各种参数，然后根据需求自定义输出

export const baseUrl = process.env.VUE_APP_BASE_URL; //后端常规业务接口地址
export const websocketUrl = process.env.VUE_APP_WEBSOCKET_URL; //后端websocket推送接口地址

export default {
    baseUrl,
    websocketUrl
};

第四步：配置axios的baseURL

import { baseUrl } from './process-env'; 
axios.defaults.baseURL = baseUrl;

第五步：编辑vue.config.js配置输出路径

module.exports = {
	outputDir: process.env.outputDir, //根据配置文件输出目录
};

到这一步已经满足不同打包模式下接口的自动配置，可以愉快的尝试不同环境的打包效果了，如果想对打包优化或更多差异化处理感兴趣继续往下看吧

第六步：打包优化及差异化处理

继续编辑vue.config.js配置文件

优化点：
1.生产环境不生成map文件
2.区分开发环境与生产环境静态资源路径
3.正式生产环境删除debugger及console.log

const isProduction = process.env.NODE_ENV === 'production'; //是否是生产环境
const isAlpha = process.env.VUE_APP_TITLE === 'alpha'; //是否是测试生产环境
const TerserPlugin = require('terser-webpack-plugin');  //压缩js的插件(需npm安装)
module.exports = {
	outputDir: process.env.outputDir, //根据配置文件输出目录
    productionSourceMap: !isProduction, //非生产环境才生成map文件
    publicPath: isProduction ? './' : '/', //打包时区分开发环境与生产环境静态资源路径
    
    configureWebpack: config => {
    	if (isProduction && !isAlpha) {
    		//正式生产环境删除debugger及console.log
    		config.plugins.push(
                new TerserPlugin({
                    terserOptions: {
                        ecma: undefined,
                        warnings: false,
                        parse: {},
                        compress: {
                            drop_console: true,
                            drop_debugger: true, //删除debugger
                            pure_funcs: ['console.log'] // 移除console
                        }
                    }
                })
            );
    	}
    },
    chainWebpack: config => {
        if (isProduction && isAlpha) {
            config.optimization.minimize(false); // 测试生产环境不压缩js代码
        }
    }
};

配置完这些赶紧去尝试打包体验下优化效果吧，over~~