vue静态文件加版本号

在Vue.js项目中，可以通过添加版本号来缓存静态文件，以提高页面加载速度和减少网络请求。通常，我们会在构建过程中自动为静态文件添加版本号。

下面是一种常见的添加版本号的方法：

1. 在Vue项目的根目录下，找到vue.config.js文件（如果没有，请创建一个）。
2. 在vue.config.js文件中，添加以下代码：

module.exports = {
  // 其他配置项...
  configureWebpack: {
    output: {
      // 添加版本号前缀
      publicPath: '/static/js/vendor/npm-module/'
    }
  },
  chainWebpack: config => {
    // 为静态文件添加版本号
    config.module
      .rule('images')
      .use('file-loader')
      .loader('file-loader')
      .options({
        name: 'images/[hash].[ext]', // 添加哈希值作为版本号
        context: path.resolve(__dirname, 'src'),
        outputPath: 'static/images',
        publicPath: '/static/images',
        useRelativePaths: true,
        esModule: true,
        loading: 'lazy',
        loadingContext: '#/loading',
        loadingColor: '#666',
        cacheIdentifier: getCacheIdentifier('images') // 生成版本号
      });
    config.module
      .rule('css')
      .use('file-loader')
      .loader('file-loader')
      .options({
        name: 'css/[hash].[ext]', // 添加哈希值作为版本号
        context: path.resolve(__dirname, 'src'),
        outputPath: 'static/css',
        publicPath: '/static/css',
        useRelativePaths: true,
        esModule: true,
        cacheIdentifier: getCacheIdentifier('css') // 生成版本号
      });
  }
};

3. 在getCacheIdentifier()函数中，实现生成版本号的逻辑。可以使用crypto库来生成哈希值，例如：

function getCacheIdentifier(ruleId) {
  const date = new Date();
  const hour = date.getHours();
  const minute = date.getMinutes();
  const second = date.getSeconds();
  const milliseconds = date.getMilliseconds();
  const timestamp = `${hour}${minute}${second}${milliseconds}`;
  const crypto = require('crypto');
  const hash = crypto.createHash('sha256');
  hash.update(timestamp);
  return `${ruleId}-${hash.digest('hex')}`; // 返回规则ID和哈希值的组合作为版本号
}

4. 保存文件并重新构建项目。现在，在生成的静态文件中，将包含以哈希值作为版本号的文件名。例如：images/1658125479377.jpg、css/698804553054e12c2497db78e5412c20.css等。浏览器会根据文件名中的版本号来判断是否需要重新下载文件。