vue项目打包文件增加hash值
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
的影响