vue-cli3分环境打包配置

概述

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

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

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

第一步：创建配置文件

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

注：vue-cli3脚手架中内置了.env.development与.env.production的默认配置，新增这两个配置文件后打包过程中webpack会合并默认配置和自定义配置的内容

.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.preview

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

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

VUE_APP_TITLE = development 开发模式打包
VUE_APP_TITLE = preview 预览模式打包
VUE_APP_TITLE = production 生产模式打包

VUE_APP_BASE_URL 后端常规业务接口地址(自定义，必选)
VUE_APP_WEBSOCKET_URL 后端websocket推送接口地址(自定义，项目没有需求就不需要添加这一行配置)

outputDir 打包输出目录名称(.env.development与.env.production因vue-cli3脚手架中有默认配置可以省略该项)

第二步：修改package.json

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

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

第三步：新建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, //根据配置文件输出目录
};

第六步：打包

通过前面的配置后，可以输入不同的命令实现差异化打包

正式生产环境打包

npm run build  

预览环境打包

npm run preview

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

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

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

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

const isProduction = process.env.NODE_ENV === 'production'; //是否是生产环境
const isPreview = process.env.VUE_APP_TITLE === 'preview'; //是否是预览环境
const TerserPlugin = require('terser-webpack-plugin');  //压缩js的插件(需npm安装)
module.exports = {
	outputDir: process.env.outputDir, //根据配置文件输出目录
    productionSourceMap: !isProduction, //非生产环境才生成map文件
    publicPath: isProduction ? './' : '/', //打包时区分开发环境与生产环境静态资源路径
    
    configureWebpack: config => {
    	if (isProduction && !isPreview) {
    		//生产环境删除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 && isPreview) {
            config.optimization.minimize(false); // 预览环境不压缩js代码
        }
    }
};

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