efunbox-yfxxt-statistics/vue.config.js

/**
 * 配置文件地址
 * https://cli.vuejs.org/zh/config/#vue-config-js
 */
const IS_PROD = ["production", "prod"].includes(process.env.NODE_ENV);
const path = require('path');
const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin;
const CompressionWebpackPlugin = require("compression-webpack-plugin");
const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i;
module.exports = {
    /**
     * 部署应用包时基本的URL,与webpack中的output.publicPath一致
     * 默认情况下是部署到一个域名的根路径上，
     * 也可以设置成'',或者相对路径'./';这样所有的资源都会被链接相对路径，就可以部署到任意路径
     */
    publicPath: './',
    /**
     * 生产环境打包生成的文件夹，构建之前会清除构建目录，与webpack中的output.path一致
     */
    outputDir: 'dist',
    /**
     * 放置生成的静态文件
     */
    assetsDir: 'assets',
    /**
     * 默认情况下生成的静态文件包含hash值更好的控制缓存，html必须是动态生成，如果不是动态生成可以置为false
     * 与webpack中的output.filename中的名字加hash一样
     */
    filenameHashing: true,
    /**
     * 如果不需要生产环境的source map,可以设置为false加快构建
     */
    productionSourceMap: false,
    /**
     * 所有webpack-dev-server的选项都支持
     * https://webpack.docschina.org/configuration/dev-server/#devserveroverlay
     */
    devServer: {
        port: '8897',
        open: true,
        progress: true,
        overlay: {
            warnings: false,
            errors: true
        }
    },
    // webpack配置
    chainWebpack: config => {
        // 是否将符号链接(symlink)解析到它们的符号链接位置
        config.resolve.symlinks(true)
        if (IS_PROD) {
            config.plugin("webpack-report").use(BundleAnalyzerPlugin, [
                {
                analyzerMode: "static"
                }
            ]);
            config.optimization.delete("splitChunks");
        }
    },
    configureWebpack: config => {
        if (process.env.VUE_APP_MODE === 'production') {
            // 生产环境
            config.mode = 'production'
        } else {
            // 开发环境
            config.mode = 'development'
        }
        Object.assign(config, {
            resolve: {
                alias: {
                    '@': path.resolve(__dirname, './src')
                }
            }
        })
        const plugins = []
        if (IS_PROD) {
            config.optimization ={
                splitChunks: {
                    cacheGroups: {
                        common: {
                            name: "chunk-common",
                            chunks: "all",
                            minChunks: 2,
                            maxInitialRequests: 5,
                            minSize: 0,
                            priority: 1,
                            reuseExistingChunk: true,
                            enforce: true
                        },
                        vendors: {
                            name: "chunk-vendors",
                            test: /[\\/]node_modules[\\/]/,
                            chunks: "initial",
                            priority: 2,
                            reuseExistingChunk: true,
                            enforce: true
                        },
                        antDesignVueUI: {
                            name: "chunk-antdesignvueUI",
                            test: /[\\/]node_modules[\\/]ant-design-vue[\\/]/,
                            chunks: "all",
                            priority: 3,
                            reuseExistingChunk: true,
                            enforce: true
                        },
                        echarts: {
                            name: "chunk-echarts",
                            test: /[\\/]node_modules[\\/](vue-)?echarts[\\/]/,
                            chunks: "all",
                            priority: 4,
                            reuseExistingChunk: true,
                            enforce: true
                        }
                    }
                }
            }
            plugins.push(
                new CompressionWebpackPlugin({
                    filename: "[path].gz[query]",
                    algorithm: "gzip",
                    test: productionGzipExtensions,
                    threshold: 10240,
                    minRatio: 0.8
                })
            )
        }
        config.plugins = [...config.plugins, ...plugins];
    }
}