在vue-cli2项目中，修改`webpack.prod.conf.js`，js和css文件可通过设置`[chunkhash]`和`[contenthash]`添加hash值。对于vue-cli3项目，`filenameHashing`默认为true时，js和css文件会自动添加hash值。在development模式下，可通过`vue.config.js`的`chainWebpack`配置js和css文件的hash值，例如`config.output.filename('assets/js/[name].[hash].js')`和`config.plugin('extract-css')`。注意，设置`filename`后，文件路径不再受`assetsDir`影响。
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('asse
最低0.47元/天 解锁文章
扫一扫
5868
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
