vue项目部署,清理缓存方式

1.index.html

<!--清除浏览器中的缓存 -->
<meta http-equiv="pragram" content="no-cache">
<meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate">

2.vue.config.js

const timeUpdate  = new Date().getTime();
module.exports = {
  // 解决发布生产以后有缓存的问题
  // 输出重构  打包编译后的 文件名称  【模块名称.版本号.时间戳】
  //一般情况下，该方法就能解决。
  configureWebpack: {
    output: {
      filename: `[name].js?v=${timeUpdate}`,
      chunkFilename: `[name].js?v=${timeUpdate}`
    },
  },
  // 修改打包后css文件名
  css: {
    loaderOptions: {
      sass: {
        data: `@import "@/components/themes/_handle.scss";`
      }
    },
    // 是否使用css分离插件 ExtractTextPlugin
    extract: {
      filename: `static/css/[name].${timeUpdate}.css`,
      chunkFilename: `static/css/[name].${timeUpdate}.css`
    }
  },
  // webpack-chain (链式操作)这个库提供了一个 webpack 原始配置的上层抽象，
  // 使其可以定义具名的 loader 规则和具名插件，并有机会在后期进入这些规则并对它们的选项进行修改。
  // 它允许我们更细的控制其内部配置。
  chainWebpack(config) {
        // img的文件名修改
        config.module
          .rule('images')
          .use('url-loader')
          .tap(options => {
            options.name = `static/img/[name].${timeUpdate}.[ext]`
            options.fallback = {
              loader: 'file-loader',
              options: {
                name: `static/img/[name].${timeUpdate}.[ext]`
              }
            }
            return options
          })
    },
};