Vue 延迟加载在 Vite 中不像在 Vue-CLI 中那样工作答案

【问题标题】：Vue lazy loading does not work in Vite as did in Vue-CLIVue 延迟加载在 Vite 中不像在 Vue-CLI 中那样工作
【发布时间】：2022-01-03 19:05:04
【问题描述】：

我在 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") 函数并直接使用如下导入时，它可以工作。

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

谁能解释一下原因？

【问题讨论】：

标签： vue.js vue-cli vite

【解决方案1】：

谁能解释一下原因？

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

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

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

为什么当您删除 getView() 并直接编写 import 指令时它会起作用？

如果您设置文字字符串，则别名将被解析（它最终成为相对或绝对路径，尊重汇总要求）。

【讨论】：