vue 打包 js css 添加 hash

vue项目打包文件增加hash值 (vue-cli 3 无需额外的配置)

vue-cli2项目

修改vue项目根目录下的 build/webpack.prod.conf.js文件

js文件：

output: {
  path: config.build.assetsRoot,
  filename: utils.assetsPath('js/[name].[chunkhash].js'),
  chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
}

css文件：

plugins: [
  new ExtractTextPlugin({
    filename: utils.assetsPath('css/[name].[contenthash].css')
    allChunks: true
  })
]

vue-cli3项目

filenameHashing配置

该配置用来配置打包生成的文件是否带hash值后缀，该值默认为true，在模式为production的时候，打包出的js和css文件会自动添加hash值后缀。但是在当前模式为development的时候，就算该值为true，打包出的js文件不带hash值（css文件仍然受该值控制）。这个时候我们该怎么给打包的文件增加hash值呢：

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config.output.filename('assets/js/[name].[hash].js').chunkFilename('assets/js/[name].[hash].js').end()

    // 如果filenameHashing设置为了false，可以通过这段代码给打包出的css文件增加hash值
    // config.plugin('extract-css').tap(args => [{
    //   filename: 'assets/css/[name].[hash].css',
    //   chunkFilename: 'assets/css/[name].[hash].css'
    // }])
  }
}

• vue-cli3打包命令vue-cli-service build默认模式为production，关于vue-cli3模式的详解：https://www.cnblogs.com/heroljy/p/9305263.html
• 设置cofig.output.filename之后，输出的文件路径将不受vue.config.js中的assetsDir的影响

作者：三千不易留
链接：https://www.jianshu.com/p/6a6fbac06e15
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。