/** * 配置文件地址 * 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]; } }