解决VUE3项目部署后存在缓存页面不更新的问题

方法一：

找到项目中的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`,
    }
  }
}) 

以上方法效果因项目而异，要注意和其它配置项的关联。