解决 Element plus 引起的点击路由页面刷新问题
- 这是因为我们使用了 element plus 组件库的按需引入,导致新页面发现新的组件时候回重新编译,导致的页面刷新
- 这里的解决方案就是配置将 element plus 组件库预构建,这样就不会重新编译,就不会刷新页面了。
- 官方文档
- 具体配置如下:
js
export default defineConfig(() => {
// 这里只加入了element的有其他的也加在这里
const optimizeDepsElementPlusIncludes = ["element-plus/es"]
// 预加载element样式 有其他组件也是如此设置即可
fs.readdirSync("node_modules/element-plus/es/components").forEach((dirname) => {
fs.access(
// 其他框架这个路径根据控制台输出进行修改 有的项目时加载的是 css.mjs 有些是 index.mjs 这个路径vite控制台能够看出来
`node_modules/element-plus/es/components/${dirname}/style/index.mjs`,
(err) => {
if (!err) {
optimizeDepsElementPlusIncludes.push(`element-plus/es/components/${dirname}/style/index`)
}
}
)
})
return {
// 其他配置
optimizeDeps: {
include: optimizeDepsElementPlusIncludes,
},
}
})