Day 17/100 Vue3 项目发版后刷新面项目及时生效的配置

1、需求

项目被吐槽挺多次了，说一直需要强刷才可以看到新的项目；上次改了nginx配置不好使。
发现是需要打包规则这里，加上时间戳，和？v=时间戳就好很多了。我也不确定会不会还有其他问题，先记录下来

2、代码

配置vue.config.js文件：

const Timestamp = new Date().getTime()
module.exports = {
  assetsDir: 'static',
  publicPath: './', // 生产环境
  // 打包的时候不使用hash值.因为我们有时间戳来确定项目的唯一性了.
  filenameHashing: false,
  outputDir: 'dist',
  pluginOptions: {
    webpack: {
      dir: ['./webpack']
    }
  },
  productionSourceMap: false,
  configureWebpack: { // 重点
    // 输出重构 打包编译后的js文件名称,添加时间戳.
    output: {
      filename: `js/[name].${Timestamp}.js?v=${Timestamp}`,
      chunkFilename: `js/chunk.[id].${Timestamp}.js?v=${Timestamp}`
    }
  },
  css: {
    extract: {
      // 打包编译后修改 css 文件名
      filename: `static/css/[name].${Timestamp}.css?v=${Timestamp}`,
      chunkFilename: `static/css/[name].${Timestamp}.css?v=${Timestamp}`
    }
  }
}

参考链接

https://blog.csdn.net/xi_nuo/...