方法一:
找到项目中的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`}},
})
打包后代码和浏览器中效果如下:
方法三:
此方法适用于路由为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`,}}
})
以上方法效果因项目而异,要注意和其它配置项的关联。