vue-cli3下vue.config.js配置

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

文件配置如下

const CompressionPlugin = require('compression-webpack-plugin'); // 引入gzip压缩插件
const { yymmdd, ssmmss } = require('./utils/time');
const timeStamp = Date.now();
const v = yymmdd(timeStamp) + ssmmss(timeStamp);
process.env.VUE_APP_VERSION = v; // 自定义项目版本
module.exports = {
  // vue.config.js
  // 选项...
  publicPath: process.env.BASE_URL, // 可以在  .env.mode文件中设置，然后直接引用
  outputDir: 'dist',
  assetsDir: 'assets',
  indexPath: 'index.html',
  filenameHashing: false,
  pwa: {
    name: '梯方选课',
    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$/] // 缓存列表排除的文件，可以是文件名或正则
    }
  },
  css: {
    // css全部外联并且自定义文件名称 [hash] [name]
    extract: {
      filename: `assets/css/[name]_${v}.css`,
      chunkFilename: `assets/css/[name]_${v}.css`
    }
  },
  configureWebpack: config => {
    // 修改打包的js文件名称  [hash] [name]
    config.output.filename = `assets/js/[name]_${v}.js`;
    config.output.chunkFilename = `assets/js/[name]_${v}.js`;
    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/main.js',
      // 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><%= htmlWebpackPlugin.options.title %></title>
      title: '梯方在线',
      // chunks to include on this pages, by default includes
      // extracted common chunks and vendor chunks.
      chunks: ['chunk-vendors', 'chunk-common', 'index']
    }
  },
  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('');
  //   }
  // }
};