js-wlg-app/vue.config.js

const { defineConfig } = require("@vue/cli-service");
const path = require("path");
const LodashModuleReplacementPlugin = require("lodash-webpack-plugin");
const AutoImport = require("unplugin-auto-import/webpack");
const Components = require("unplugin-vue-components/webpack");
const { ElementPlusResolver } = require("unplugin-vue-components/resolvers");

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

const IS_PRODUCTION = process.env.NODE_ENV === "production";

module.exports = defineConfig({
  publicPath: "./",
  transpileDependencies: true,
  pluginOptions: {
    electronBuilder: {
      customFileProtocol: "./",
      builderOptions: {
        productName: "云上博物",
        asar: false,
        nsis: {
          oneClick: false,
          allowToChangeInstallationDirectory: true,
        },
        win: { target: "nsis", icon: "./public/imgs/icon.png" },
      },
    },
  },
  configureWebpack: {
    devtool: "source-map",
    resolve: {
      symlinks: false,
      alias: {
        "@": path.join(__dirname, "src"),
      },
    },
    plugins: [
      AutoImport({
        resolvers: [ElementPlusResolver()],
      }),
      Components({
        resolvers: [ElementPlusResolver()],
      }),
    ],
  },
  chainWebpack: (webpackConfig) => {
    webpackConfig.module.rules.delete("svg");
    webpackConfig.module
      .rule("svg-sprite-loader")
      .test(/.svg$/)
      .include.add(resolve("src/assets/svg"))
      .end()
      .use("svg-sprite-loader")
      .loader("svg-sprite-loader")
      .options({
        symbolId: "icon-[name]",
      });

    if (IS_PRODUCTION) {
      webpackConfig
        .plugin("loadshReplace")
        .use(new LodashModuleReplacementPlugin());

      webpackConfig.optimization.splitChunks({
        cacheGroups: {
          limitJson: {
            test: /[\\/]limit\.json$/,
            name: "limit",
            chunks: "all",
            priority: 1,
            enforce: true,
          },
          common: {
            name: "chunk-common",
            chunks: "initial",
            minChunks: 2,
            // 一个入口最大的并行请求数
            maxInitialRequests: 4,
            // 形成一个新代码块最小的体积
            minSize: 5000,
            // 缓存组打包的先后优先级
            priority: 1,
            // 如果当前的 chunk 已被从 split 出来，那么将会直接复用这个 chunk 而不是重新创建一个
            reuseExistingChunk: true,
          },
          vendors: {
            name: "chunk-vendors",
            test: /[\\/]node_modules[\\/]/,
            chunks: "initial",
            priority: 2,
            reuseExistingChunk: true,
            // 总是为这个缓存组创建 chunks
            enforce: true,
          },
          elementIcons: {
            name: "element-icons",
            test: /[\\/]node_modules[\\/]@element-plus[\\/]/,
            chunks: "initial",
            priority: 3,
            reuseExistingChunk: true,
            enforce: true,
          },
          elementPlus: {
            name: "element-plus",
            test: /[\\/]node_modules[\\/]element-plus[\\/]/,
            chunks: "initial",
            priority: 3,
            reuseExistingChunk: true,
            enforce: true,
          },
        },
      });
    }
  },
});