在做一个用vite构建的vue3项目时，动态拉取菜单导入页面，然后一直报错，偶尔可以，偶尔不行。

问题描述

原错代码：

menu.forEach((item) => {
        if (item.children) {
          item.children = item.children.map((item) => {
            let url = `../views/${item.url}.vue`;

            item.component = () => import(url);
            return item;
          });
          menuArray.push(...item.children);
        } else {
          let url = `../views/${item.url}.vue`;
          item.component = () => import(url);
          menuArray.push(item);
        }
      });

报错信息：

16:40:30 [vite] page reload src/store/index.js
16:40:30 [vite] warning: 
E:/manage-app/src/store/index.js
48 |              return item;
49 |            });
50 |            menuArray.push(...item.children);
   |   ^
51 |          } else {
52 |            let url = `../views/${item.url}.vue`;
The above dynamic import cannot be analyzed by Vite.
See https://github.com/rollup/plugins/tree/master/packages/dynamic-import-vars#limitations for supported dynamic import formats. If this is intended to be left as-is, you can use the /* @vite-ignore */ comment inside the import() call to suppress this warning.

  Plugin: vite:import-analysis
  File: E:/manage-app/src/store/index.js

解决方案

报错提示让我们使用：@rollup/plugin-dynamic-import-vars这个插件。

Vite官方文档说需要使用Glob 导入形式，然后看了一个Glob的文档，解决了这个问题。

首先需要使用特殊的import.meta.glob函数从文件系统导入多个模块：

const modules = import.meta.glob('../views/*/*.vue');

他会匹配并导入所有相关的组件：

// vite 生成的代码
const modules = {
  './views/foo.vue': () => import('./views/foo.vue'),
  './views/bar.vue': () => import('./views/bar.vue')
}

然后修正代码即可：

      menu.forEach((item) => {
        if (item.children) {
          item.children = item.children.map((item) => {
            let url = `../views/${item.url}.vue`;
            item.component = modules[url];
            return item;
          });
          menuArray.push(...item.children);
        } else {
          let url = `../views/${item.url}.vue`;
          item.component = modules[url];
          menuArray.push(item);
        }
      });