Vue CLI: 给 index.html 静态资源添加版本号

可以通过 webpack 的插件 HtmlWebpackPlugin 来给 index.html 中引用的静态资源加上版本号。

1. 安装 HtmlWebpackPlugin 插件：

npm install --save-dev html-webpack-plugin

2. 在 webpack 配置文件中引入插件：

const HtmlWebpackPlugin = require('html-webpack-plugin');

3. 在 plugins 中添加插件：

plugins: [
  new HtmlWebpackPlugin({
    template: 'public/index.html', // 指定模板文件
    filename: 'index.html', // 输出的文件名
    hash: true // 开启文件名后缀的 hash 值
  })
]

4. 在 index.html 中引用静态资源时加上 hash 值：

<link rel='stylesheet' href='./css/app.css?v=<%= htmlWebpackPlugin.files.chunks.main.hash %>'>
<script src='./js/app.js?v=<%= htmlWebpackPlugin.files.chunks.main.hash %>'></script>

这样就可以给 index.html 中引用的静态资源加上版本号了。每次构建时，hash 值会自动改变，保证静态资源的更新。