前言
当vue打包文件部署到线上时,会出现.js,.css文件404的情况,因为缓存原因,加载的js和css是之前的js和css,此文章用前端方法解决清除缓存的问题
1.index.html插入如下代码
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate">
http-equiv=“pragma”: 说明:是用于设定禁止浏览器从本地机的缓存中调阅页面内容,设定后一旦离开网页就无法从Cache中再调出
content=“no-cache”:设置过去时间
关于此属性疑问,请移步https://www.cnblogs.com/dreamaker/p/10576750.html
2.在根目录下新建vue.config.js
const Version = new Date().getTime()
module.exports = {
css: {
loaderOptions: {
sass: {
data: `@import "@/components/themes/_handle.scss";`
}
},
// 是否使用css分离插件 ExtractTextPlugin
extract: {
// 修改打包后css文件名
filename: `static/css/[name].${Version}.css`,
chunkFilename: `static/css/[name].${Version}.css`
}
},
configureWebpack: {
output: { // 输出重构 打包编译后的 文件名称 【模块名称.版本号.时间戳】
// filename: utils.assetsPath('js/[name].[chunkhash].'+Version+'js'),
// chunkFilename: utils.assetsPath('js/[id].[chunkhash].'+Version+'js')
filename: `static/js/[name].${Version}.js`,
chunkFilename: `static/js/[name].${Version}.js`
}
},
chainWebpack(config) {
// img的文件名修改
config.module
.rule('images')
.use('url-loader')
.tap(options => {
options.name = `static/img/[name].${Version}.[ext]`
options.fallback = {
loader: 'file-loader',
options: {
name: `static/img/[name].${Version}.[ext]`
}
}
return options
})
}
}
完结,撒花!!!