vue-cli3下vue.config.js配置

在根目录创建vue.config.js文件

文件配置如下

const CompressionPlugin = require("compression-webpack-plugin"); //引入gzip压缩插件
module.exports = {
  // vue.config.js
  // 选项...
  publicPath: "./",
  outputDir: "dist",
  assetsDir: "assets",
  indexPath: "index.html",
  filenameHashing: true,
  pwa: {
    name: "xxxx",
    themeColor: "#4DBA87",
    msTileColor: "#000000",
    appleMobileWebAppCapable: "yes",
    appleMobileWebAppStatusBarStyle: "black",
    display: "fullscreen",
    // 配置 workbox 插件
    // workboxPluginMode: "InjectManifest",
    workboxOptions: {
      //   //swSrc: "./public/sw.js", // 本地sw.js相对路径
      //   importWorkboxFrom: "disabled", // 决定是否引入workbox
      exclude: [/\.html$/, /\.css.map$/, /sw.js$/] // 缓存列表排除的文件，可以是文件名或正则
    }
  },
  configureWebpack: config => {
    if (process.env.NODE_ENV === "production") {
      // 附赠一个好方法  去除代码中的console
      config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true;
      // 保持类名不被压缩
      config.optimization.minimizer[0].options.terserOptions.keep_fnames = true;
    }
    return {
      // 开启gzip压缩
      plugins: [
        new CompressionPlugin({
          //gzip压缩配置
          test: /\.js$|\.html$|\.css/, //匹配文件名
          threshold: 10240, //对超过10kb的数据进行压缩
          deleteOriginalAssets: false //是否删除原文件
        })
      ]
    };
  },
  pages: {
    index: {
      // entry for the pages
      entry: "src/index/main.ts",
      // the source template
      template: "public/index.html",
      // output as dist/index.html
      filename: "index.html",
      // when using title option,
      // template title tag needs to be 
      title: "梯方选课",
      // chunks to include on this pages, by default includes
      // extracted common chunks and vendor chunks.
      chunks: ["chunk-vendors", "chunk-common", "index"]
    },
    paysucess: {
      // entry for the pages
      entry: "src/paysuccess/main.ts",
      // the source template
      template: "public/paysuccess.html",
      // output as dist/index.html
      filename: "paysuccess.html",
      // when using title option,
      // template title tag needs to be 
      title: "支付反馈",
      // chunks to include on this pages, by default includes
      // extracted common chunks and vendor chunks.
      chunks: ["chunk-vendors", "chunk-common", "paysucess"]
    }
  },
  lintOnSave: true,
  runtimeCompiler: false,
  transpileDependencies: [],
  productionSourceMap: false,
  crossorigin: undefined,
  integrity: false,
  devServer: {
    // 代理
    // port: 8081,
    // host: "192.168.0.212",
    // proxy: {
    //   "/api": {
    //     target: "http://online.tifangedu.com",
    //     changeOrigin: true,
    //     pathRewrite: {
    //       "^/api": "/" //这里理解成用‘/api’代替target里面的地址，组件中我们调接口时直接用/api代替
    //       // 比如我要调用'http://0.0:300/user/add'，直接写‘/api/user/add’即可 代理后地址栏显示/
    //     }
    //   }
    // }
  },
  chainWebpack: config => {
    /* 添加分析工具 */
    if (process.env.NODE_ENV === "development") {
      // 打开文件分析
      config
        .plugin("webpack-bundle-analyzer")
        .use(require("webpack-bundle-analyzer").BundleAnalyzerPlugin)
        .end();
      config.plugins.delete("prefetch");
    } else {
      console.log("");
    }
  }
};