vue.config.js配置：

1.官方文档：

https://cli.vuejs.org/zh/config/#vue-config-js

2.安装依赖：

npm install compression-webpack-plugin@6.1.1

3.配置：

const path = require('path')
const CompressionPlugin = require("compression-webpack-plugin")  //引入compression-webpack-plugin插件

function resolve(dir) { return path.join(__dirname, dir) }

// vue.config.js配置
module.exports = {
    productionSourceMap: false,// 生成环境是否开启SourceMap
    outputDir: 'dist', // 打包输出文件目录
    assetsDir: 'assets', // 放置静态文件夹目录
    publicPath: process.env.NODE_ENV === 'production' ? '/keda' : './',// 部署应用包时的基本 URL

    //默认情况下，生成的静态资源在它们的文件名中包含了 hash 以便更好的控制缓存。你可以通过将这个选项设为 false 来关闭文件名哈希。(false的时候就是让原来的文件名不改变)
    filenameHashing: false,

    //是否使用eslint, @vue/cli-plugin-eslint 被安装之后生效。
    lintOnSave: process.env.NODE_ENV !== 'production' ? false : true,

    //是否使用包含运行时编译器的 Vue 构建版本。设置为 true 后你就可以在 Vue 组件中使用 template 选项了，但是这会让你的应用额外增加 10kb 左右。(默认false)
    // runtimeCompiler: false,

    /**
    * 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。
    * 打包之后发现map文件过大，项目文件体积很大，设置为false就可以不输出map文件
    * map文件的作用在于：项目打包后，代码都是经过压缩加密的，如果运行时报错，输出的错误信息无法准确得知是哪里的代码报错。
    * 有了map就可以像未加密的代码一样，准确的输出是哪一行哪一列有错。
    * */
    productionSourceMap: false,
    
    // css相关配置
    css: {
        extract: true, // 是否使用css分离插件 ExtractTextPlugin
        sourceMap: false, // 是否为 CSS 开启 source map。设置为 true 之后可能会影响构建的性能
        loaderOptions: {
            less: {
                javascriptEnabled: true //less 配置
            }
        }, // css预设器配置项
        modules: false // 启用 CSS modules for all css / pre-processor files.
    },
    configureWebpack: config => {
        //生产环境取消 console.log
        if (process.env.NODE_ENV === 'production') {
            config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true
        }
    },
    chainWebpack: (config) => {
        config.resolve.alias
            .set('@$', resolve('src'))
            .set('@api', resolve('src/api'))
            .set('@assets', resolve('src/assets'))
            .set('@comp', resolve('src/components'))
            .set('@views', resolve('src/views'))

        //生产环境，开启js\css压缩
        if (process.env.NODE_ENV === 'production') {
            config.plugin('compressionPlugin').use(new CompressionPlugin({
                test: /\.(js|css|less|scss)$/, // 匹配文件名
                threshold: 10240, // 对超过10k的数据压缩
                deleteOriginalAssets: false // 不删除源文件
            }))
        }

        // 配置 webpack 识别 markdown 为普通的文件
        config.module
            .rule('markdown')
            .test(/\.md$/)
            .use()
            .loader('file-loader')
            .end()

        // 编译vxe-table包里的es6代码，解决IE11兼容问题
        config.module
            .rule('vxe')
            .test(/\.js$/)
            .include
            .add(resolve('node_modules/vxe-table'))
            .add(resolve('node_modules/vxe-table-plugin-antd'))
            .end()
            .use()
            .loader('babel-loader')
            .end()
    },
    devServer: {// dev环境 （正式环境要到服务器代理）
        host: 'localhost',
        port: 8080,
        hot: true,//热更新
        open: true,//配置自动启动浏览器
        inline: true, // 用于设置代码保存时是否自动刷新页面。
        https: false, // 用于设置是否启用https
        compress: true, // 对devServer 所有服务启用 gzip 压缩
        /* 当出现编译器错误或警告时，在浏览器中显示全屏覆盖层。默认禁用。两种写法*/
        // overlay: true, // 第一种
        overlay: { // 第二种
            warnings: true, // 警告
            errors: true // 错误
        },
        // 在所有响应中添加首部内容
        headers: {
            'Access-Control-Allow-Origin': '*',
        },
        // proxy: {
        //     '/api': {
        //         target: 'https://mock.ihx.me/mock/5baf3052f7da7e07e04a5116/antd-pro', //mock API接口系统
        //         ws: false,// 是否启用websockets
        //         changeOrigin: true,//开启代理：在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
        //         secure: true,// 是否使用HTTPS协议, 默认false
        //         pathRewrite: {
        //             '/api': ''  //默认所有请求都加了api前缀，需要去掉
        //         }
        //     },
        // }
    },
}