digital-map-frontend/vue.config.js

const { defineConfig } = require("@vue/cli-service");
// const path = require("path");
const BundleAnalyzerPlugin =
  require("webpack-bundle-analyzer").BundleAnalyzerPlugin;
// const CompressionWebpackPlugin = require("compression-webpack-plugin");
module.exports = defineConfig({
  // transpileDependencies: true,
  lintOnSave: false,

  devServer: {
    host: "0.0.0.0",
    port: 8003,
    open: true,
    hot: true,
    //使用setupMiddleware来设置mock数据
    // setupMiddlewares: (middlewares, devServer) => {
    //   return mockServer(middlewares, devServer);
    // },
    proxy: {
      "/api": {
        target: "http://121.40.252.139:8089",
        changeOrigin: true, // //开启代理：在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样客户端端和服务端进行数据的交互就不会有跨域问题
        ws: true,
        pathRewrite: {
          //// 思路是如果是开发环境，就给所有要代理的接口统一加上前缀，然后代理请求时再统一通过rewrite去掉
          "^/api": "",
        },
      },
    },
  },
  chainWebpack: (config) => {
    // 分析模块
    // config.plugin("webpack-bundle-analyzer").use(BundleAnalyzerPlugin);
    // 修改src目录的默认路径
    // config.resolve.alias.set("@", path.resolve(__dirname, "src"));
    // // 添加新的入口文件和分块规则
    // config.entry("app").clear().add("./src/main.js");
    // config.optimization.splitChunks({
    //   cacheGroups: {
    //     // 创建一个新的块，用于处理src目录下的文件
    //     src: {
    //       test: /[\\/]src[\\/]/,
    //       name: "src",
    //       chunks: "all",
    //       priority: 10,
    //       enforce: true,
    //     },
    //   },
    // });
    // config.plugin("compression").use(CompressionWebpackPlugin, [
    //   {
    //     filename: "[path][base].gz",
    //     algorithm: "gzip",
    //     test: /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i,
    //     threshold: 10240,
    //     minRatio: 0.8,
    //     deleteOriginalAssets: false,
    //   },
    // ]);
  },
  // 优化因为vuetify导致的打包后chunk-vendors.js过大的问题
  // configureWebpack: {
  //   optimization: {
  //     splitChunks: {
  //       cacheGroups: {
  //         vuetify: {
  //           test: /[\\/]node_modules[\\/]vuetify[\\/]/,
  //           name: "vuetify",
  //           chunks: "all",
  //         },
  //       },
  //     },
  //   },
  // },

  // productionSourceMap: true,
  //拆分过大的js，优化加载速度
  configureWebpack: {
    // devtool: "cheap-module-source-map",
    externals: {
      // vue: "Vue",
      // vuex: "Vuex",
      // "vue-router": "VueRouter",
      // axios: "axios",
      // "element-ui": "ELEMENT",
    },
    optimization: {
      splitChunks: {
        chunks: "all",
        minSize: 60000,
        minRemainingSize: 0,
        maxSize: 100000,
        minChunks: 1,
        maxAsyncRequests: 6,
        maxInitialRequests: 4,
        enforceSizeThreshold: 50000,
        cacheGroups: {
          vendors: {
            // 打包除了element-ui之外的其他第三方库
            test: /[\\/]node_modules[\\/](?!element-ui)/,
            priority: -10,
            minSize: 30000,
            maxSize: 60000,
          },
          common: {
            // 打包src目录下的代码
            test: /[\\/]src[\\/]/,
            priority: -20,
            minSize: 20000,
            maxSize: 40000,
          },
        },
      },
    },
  },
});