Skip to content

解决 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,
    },
  }
})