Vue路由器延迟加载在Vite中不起作用（错误：未知变量动态导入）

我在 Vue 路由器中构建了以下代码，它在 Vue-CLI 中完美运行。

        import store from "./../../store/index.js";
        
        function getView(view) {
          return () => import(`@/views/settings/${view}.vue`);
        }
        
        const routes = [
          {
            path: "/myProfile",
            name: "MyProfile",
            component: getView("MyProfile"),
            beforeEnter: (to, from, next) => {
              document.title = "Profile - " + store.getters.getAppName;
              if (store.getters["userStore/authenticated"]) {
                next();
              } else {
                next({ name: "Home" });
              }
            },
          }
        ]
        export default routes;

现在我用 Vite 替换 Vue-CLI，它给出了以下错误。

TypeError: Failed to resolve module specifier '@/views/settings/MyProfile.vue'

当我删除 getView("MyProfile") 函数并直接使用 import 时，它可以工作。

    const routes = [
          {
            path: "/myProfile",
            name: "MyProfile",
            component: () => import('@/views/settings/MyProfile.vue'),
            beforeEnter: (to, from, next) => {
              document.title = "Profile - " + store.getters.getAppName;
              if (store.getters["userStore/authenticated"]) {
                next();
              } else {
                next({ name: "Home" });
              }
            },
          }
        ]

有人可以解释一下为什么吗？

有人可以解释一下为什么吗？

这是由于汇总限制造成的。所有导入必须相对于导入文件开始，并且导入不应以变量开始.

所以要得到GetView()函数工作正常，你必须替换别名（@/) 具有相对或绝对路径../views or /src/views :

function getView(view) {
  return () => import(`../views/settings/${view}.vue`);
}

为什么删除后它会起作用getView()然后你直接写import指令？

如果设置文字字符串，则解析别名（它最终达到相对或绝对路径，尊重汇总要求）.