vite + vue3 自动导入点击路由刷新问题记录

在使用elenent-plus的自动导入的时候发现,每次当也面用到新的组件时就会触发重新编译,导致页面刷新

打开vite控制台发现下面输出

输出这个之后就活导致页面刷新

此时只要配置 vite的

optimizeDeps.include 属性即可

官网链接再这里依赖优化选项 | Vite 官方中文文档 (vitejs.dev)

 

export default defineConfig(() => {
// 这里只加入了element的有其他的也加在这里
  const optimizeDepsElementPlusIncludes = ['element-plus/es'];

  //  预加载element样式 有其他组件也是如此设置即可
  fs.readdirSync('node_modules/element-plus/es/components').forEach(
    (dirname: string) => {
      fs.access(
// 其他框架这个路径根据控制台输出进行修改 有的项目时加载的是 css.mjs 有些是 index.mjs 这个路径vite控制台能够看出来
        `node_modules/element-plus/es/components/${dirname}/style/index.mjs`,
        (err: Error) => {
          if (!err) {
            optimizeDepsElementPlusIncludes.push(
              `element-plus/es/components/${dirname}/style/index`,
            );
          }
        },
      );
    },
  );
  return {
    optimizeDeps: {
      include: optimizeDepsElementPlusIncludes,
    },
    //...  其他配置
})