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
來源：簡書
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。