配置vue.config.js

configureWebpack值为对象的配置方式

const path = require('path')
const ThemeColorReplacer = require('webpack-theme-color-replacer')
const forElementUI = require('webpack-theme-color-replacer/forElementUI')
module.exports = {
    publicPath: '/', //基本路径
    outputDir: 'dist', //构建时的输出目录
    assetsDir: '', //放置静态资源的目录
    indexPath: 'index.html',  //html的输出路径
    filenameHashing: false, //文件名哈希
    lintOnSave: true, //eslint 是否在保存时检查
    runtimeCompiler: true, //是否使用带有浏览器内编译器的完整构建版本
    productionSourceMap: process.env.NODE_ENV === 'production' ? false : true, //如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建
    configureWebpack: {
        resolve: {
            alias: {
                '@': path.resolve(__dirname, 'src'),
            },
        },
        plugins: [
            // 生成仅包含颜色的替换样式（主题色等）
            new ThemeColorReplacer({
                fileName: 'style/theme-colors.[contenthash:8].css',
                matchColors: [
                    ...forElementUI.getElementUISeries(process.env.VUE_APP_ELEMENT_COLOR), // element-ui主色系列          
                ],
                externalCssFiles: ['./node_modules/element-ui/lib/theme-chalk/index.css'],
                changeSelector: forElementUI.changeSelector,
            })
        ]
    }, 
    // devServer: {
    //  proxy: {
    //      '/api': {
    //          target: 'http://192.168.0.136:8088', //需要代理的地址
    //          changeOrigin: true, //是否跨域
    //          // ws: true,  //是否启用webSocket
    //          pathRewrite: {'/api': ''},
    //      },
    //  },
    // },
};

configureWebpack值为函数的配置方式

let CompressionWebpackPlugin = require("compression-webpack-plugin")

module.exports = {
   // publicPath: './',
   // 打包到子域下面  http://www.baidu.com/sub
   // publicPath: '/sub/', 
   // outputDir: "dist/sub",      //输出目录
   // productionSourceMap: process.env.NODE_ENV==='production' ? false : true,
   //配置webpack
   configureWebpack: config=>{
       let plugins = [
           new CompressionWebpackPlugin({
               algorithm: 'gzip', //压缩方式
               test: /\.js$|\.css$/, //匹配压缩文件
               threshold: 10240  //对大于10k压缩
           })
       ]
       if (process.env.NODE_ENV === 'production') {
           config.mode = "production";
           config.plugins = [...config.plugins, ...plugins]
       }else{
           config.mode = "development"
       }
       Object.assign(config, {
           externals: {    //排除不需要依赖包
               vue: 'Vue',  //import Vue from 'vue'
               axios: 'axios' //import axios from 'axios'
           }
       })
   }
}