vue 打包添加版本号

vue 打包添加版本号

1、在文件名后拼接版本号

vue在打包时会用随机字符串作为文件名，控制静态资源及时更新，但是有些时候，浏览器就是不更新，可以在引入静态资源后面再添加版本号。

vue-cli 2.0 版本

修改 build/webpack.prod.conf.js，在 HtmlWebpackPlugin 插件配置项中添加 hash: true

new HtmlWebpackPlugin({
  filename: process.env.NODE_ENV === 'testing' ? 'index.html' : config.build.index,
  template: 'index.html',
  inject: true,
  hash: true, // 添加改选项
  minify: {
    removeComments: true,
    collapseWhitespace: true,
    removeAttributeQuotes: true
  },
  chunksSortMode: 'dependency'
})

vue-cli 3.0 版本

修改vue.config.js，没有该文件则手动添加

module.exports = {
  filenameHashing: true
}

2、添加版本文件

需要准备一个 Git版本Webpack插件：git-revision-webpack-plugin，该插件可在构建过程中生成VERSION和COMMITHASH文件的Webpack插件，

地址：http://npm.taobao.org/package/git-revision-webpack-plugin。

安装本地开发依赖

webpack 4 及以上

npm install --save-dev git-revision-webpack-plugin
// 或
cnpm install --save-dev git-revision-webpack-plugin

webpack 4 及以下

npm install --save-dev git-revision-webpack-plugin@2.5.1
// 或
cnpm install --save-dev git-revision-webpack-plugin@2.5.1

另外，还需要在 build/webpack.prod.conf.js 中增加以下代码：

……//省略代码
 
const GitRevisionPlugin = require('git-revision-webpack-plugin')   //new add.

const env = process.env.NODE_ENV === 'testing' ? require('../config/test.env') : require('../config/prod.env')

const webpackConfig = merge(baseWebpackConfig, {
 
……//省略代码
 
  plugins: [
    // http://vuejs.github.io/vue-loader/en/workflow/production.html
    new GitRevisionPlugin(),    //new add.
    new webpack.DefinePlugin({
      'process.env': env
    }),

……//省略代码
 
  ]
})
 
……//省略代码

然后 执行 ‘npm run build’，dist 目录下会生成 VERSION 和 COMMITHASH 文件