vue3+vite项目，页面长时间不点击切换路由报错，f5又可以正常访问，之前的vue2+webpackage都没出现过这个问题
长时间不点击切换路由导致的错误可能与Vite的HMR（热模块替换）机制有关。HMR是Vite的一个特性，它可以在开发过程中实现快速的模块热更新。
这个问题可能是由于缺乏自动刷新的机制造成的。有两个解决方案可以尝试：
vite.config.js配置文件中的server选项，并设置hmr: { overlay: false }。这样可以禁用Vite的错误覆盖页面，当出现错误时不会自动刷新页面，而是在控制台中展示错误信息。// vite.config.js
export default {
server: {
hmr: {
overlay: false
}
}
}
vite-plugin-pages插件提供的keepAlive功能。这个插件可以帮助保持一个页面的状态，即使路由发生变化也不会销毁和重建。这样可以防止长时间不点击导致的错误。首先，安装vite-plugin-pages：
npm install vite-plugin-pages
然后，在vite.config.js配置文件中添加以下代码：
// vite.config.js
import { defineConfig } from 'vite'
import { createVuePlugin } from 'vite-plugin-vue'
import pages from 'vite-plugin-pages'
// 其他配置
export default defineConfig({
plugins: [
createVuePlugin(),
pages({
// 其他配置
keepAlive: [
// 你的页面组件路径
'/path/to/your/page.vue'
]
})
]
})
这样，配置了keepAlive之后，在切换路由时页面属性将保持不变，避免错误发生。
另外，请确保你的项目已经更新到最新版本，并且安装的依赖包也是最新的版本。有时候，这些错误可能是由于依赖项版本不兼容导致的。
【相关推荐】