vue.js - Vue路由器延迟加载在Vite中不起作用(错误: Unknown variable dynamic import)

Question

我在 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" });
              }
            },
          }
        ]

有人可以解释一下原因吗？

Answer 1

Can someone please, explain why?

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

因此，要使 GetView() 函数正常工作，您必须将别名 (@/) 替换为相对或绝对路径 ../views 或 /src/views :

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

Why it is working when you remove the getView() and you write directly the import directive ?

如果您设置文字字符串，则会解析别名(它最终会变为相对或绝对路径，尊重汇总要求)。。