自用vue.config.js配置

const FileManagerPlugin = require("filemanager-webpack-plugin");
const CompressionWebpackPlugin = require("compression-webpack-plugin");
// 格式化时间
function formatTime() {
  var date = new Date(),
    Y = date.getFullYear(),
    m = date.getMonth() + 1,
    d = date.getDate(),
    H = date.getHours(),
    i = date.getMinutes();
  if (m < 10) {
    m = "0" + m;
  }
  if (d < 10) {
    d = "0" + d;
  }
  if (H < 10) {
    H = "0" + H;
  }
  if (i < 10) {
    i = "0" + i;
  }
  var t = Y + m + d + "-" + H + i;
  return t;
}
module.exports = {
  // 配置 axios 代理请求
  productionSourceMap: false,
  assetsDir: "static", // 静态目录
  outputDir: "pwa-dist",
  publicPath: "/",
  devServer: {
    host: "0.0.0.0", //ip地址
    hot: true, //热加载
    port: 8000, //端口
    https: false, //false关闭https，true为开启
    open: true, //自动打开浏览器
    proxy: {
      "/api": {
        // target: "https://localhost:3000/api",
        // 在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
        changeOrigin: true,
        ws: true,
        pathRewrite: {
          // 替换target中的请求地址，也就是说以后你在请求http://api.jisuapi.com/XXXXX这个地址的时候直接写成/api/xxx即可
          "^/api": "/"
        }
      }
    }
    // https: true 打开https 用于测试线上是否存在部分资源未替换https证书
  },

  // pwa背景、图表等详细配置
  pwa: {
    name: "视频",
    short_name: "视频",
    themeColor: "#1D1D1D",
    msTileColor: "#1D1D1D",
    workboxOptions: {
      runtimeCaching: [
        {
          // 匹配包含`api`的任何同源请求。
          urlPattern: new RegExp(".*.html"),
          // 应用网络优先策略。
          handler: "networkFirst"
        }
      ],
      importWorkboxFrom: "cdn",
      globPatterns: [".*.html"],
      skipWaiting: true,
      clientsClaim: true,
      navigateFallback: "/index.html"
    }
  },
  lintOnSave: process.env.NODE_ENV !== "production",
  configureWebpack: config => {
    // gzip压缩
    config.plugins.push(
      new CompressionWebpackPlugin({
        test: /.js$|.html$|.css$/,
        threshold: 4096 // 超过4kb压缩
      })
    );
    // html加入script引入，文件中去掉import Vue 等，使用时添加window
    // config["externals"] = {
    //   vue: "Vue",
    //   "vue-router": "VueRouter",
    //   vuex: "Vuex",
    //   "vue-clipboard2": "VueClipboard"
    // };
    if (process.env.VUE_APP_MODE == "发布") {
      // 打包生成release包
      var path = "./Releases/pwa-dist-" + formatTime() + ".zip";
      config.plugins.push(
        new FileManagerPlugin({
          events: {
            onEnd: {
              archive: [{ source: "./pwa-dist", destination: path }]
            }
          }
        })
      );
    }
  },
  chainWebpack: config => {
    // 移除 prefetch 插件
    config.plugins.delete("prefetch");
    config.plugins.delete("prefetch-index").delete("preload-index");
    config.entry("main").add("babel-polyfill");

    // 图片转base64
    config.module
      .rule("images")
      .use("url-loader")
      .loader("url-loader")
      .tap(options => Object.assign(options, { limit: 2000000 }));

    // 配置打包上线代码去console
    // if (process.env.VUE_APP_MODE == "发布") {
    config.optimization.minimizer("terser").tap(args => {
      args[0].terserOptions.compress.drop_console = true;
      args[0].terserOptions.compress.pure_funcs = ["console.log"];
      args[0].terserOptions.output = { comments: false };
      return args;
    });

    // 分割 chunk-vendors
    config.optimization.splitChunks({
      chunks: "all",
      cacheGroups: {
        libs: {
          name: "chunk-libs",
          test: /[/]node_modules[/]/,
          priority: 10,
          chunks: "initial"
        },
        vantUI: {
          name: "chunk-vantUI",
          priority: 20, // 优先级 20
          test: /[/]node_modules[/]_?vant(.*)/
        }
      }
    });
    // }
    return config;
  }
};