方法一:
找到项目中的index.html文件,在头部加上以下代码
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-control" content="no-cache">
<meta http-equiv="Cache" content="no-cache">
若以上代码仍不能解决问题,请使用以下两种方法。
方法二:
此方法适用于路由为hash模式的情况下
找到配置文件,在文件vue.config.js中配置filenameHashing和output。
1.filenameHashing(关闭hash命名)
2.通过output配置filename和chunkFilename之后使得打包后生成的html中引入的js地址后面有版本号,由此触发更新,版本号可以是固定值。
注意:路径的配置因项目的配置而异,不要出错!
module.exports = defineConfig({
transpileDependencies: true,
lintOnSave: false,
publicPath: "./",
assetsDir: 'static',
filenameHashing: false,
configureWebpack: {
output: {
filename: `static/js/[name].js?v=1`,
chunkFilename: `static/js/[name].js?v=1`
}
},
})
打包后代码和浏览器中效果如下:
扫描二维码关注公众号,回复:
16470548 查看本文章
方法三:
此方法适用于路由为history模式的情况下
通过时间戳配置js文件名和css文件名,使得每次打包生成的文件名不同,从而触发更新。
注意:history模式需要服务器端的支持,若服务器端不支持,会出现404的现象。
const { defineConfig } = require('@vue/cli-service')
const Timestamp = new Date().getTime();
module.exports = defineConfig({
transpileDependencies: true,
lintOnSave: false,
publicPath: "./",
assetsDir: 'static',
configureWebpack: {
output: {
filename: `static/js/[name].${Timestamp}.js`,
chunkFilename: `static/js/[name].${Timestamp}.js`
}
},
css: {
extract: {
filename: `static/css/[name].${Timestamp}.css`,
chunkFilename: `static/css/chunk.[id].${Timestamp}.css`,
}
}
})
以上方法效果因项目而异,要注意和其它配置项的关联。