Vite + Vue Router - 动态导入

Question

我将 Vite 与 Vue 3 一起用于个人项目和vue-router@4我的路线。因为我的每个模块都使用相同的路由集，所以我创建了一个辅助函数：

import { RouteRecordRaw } from 'vue-router'
import pluralize from 'pluralize'
import Str from '@supercharge/strings'

export function createRoutes(name: string): Array<RouteRecordRaw> {
    const plural = pluralize.plural(name)
    const path = Str(plural).trim().lower().kebab().get()
    const module = Str(plural).trim().studly().get()
    const titleSingular = Str(pluralize.singular(name)).title().get()
    const titlePlural = Str(plural).title().get()

    return [
        {
            path: `/${path}`,
            name: titlePlural,
            component: () => import(`@/views/${module}/index.vue`),
        },
        {
            path: `/${path}/:id`,
            name: titleSingular,
            component: () => import(`@/views/${module}/Single.vue`),
        },
        {
            path: `/${path}/new`,
            name: `New ${titleSingular}`,
            component: () => import(`@/views/${module}/New.vue`),
        },
    ]
}

然而我面临的问题是 Vite 似乎不支持动态导入。

3:05:29 pm [vite] warning: 
G:/Dev/world-building/client/src/router/util.ts
21 |        path: `/${path}/new`,
22 |        name: `New ${titleSingular}`,
23 |        component: () => import(`@/views/${module}/New.vue`)
   |                                ^
24 |      }
25 |    ];
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: G:/Dev/world-building/client/src/router/util.ts

我查看了提供的链接以了解限制，但是我的模式似乎与支持的模式相匹配。

为什么我的代码不起作用？一切似乎都很好，但我收到了上述警告（当我尝试使用动态导入访问任何路由时，控制台中出现错误）。

如果它有帮助，我在控制台中收到的错误是：

TypeError: Failed to resolve module specifier '@/views/Galaxies/index.vue'

Answer 1

更新： Vite 3.x（当前3.0.0-alpha.7）现在支持动态导入中的别名。您可以使用以下命令安装它：

npm i -D vite@alpha

演示（Vite 3）

Vite 2.x： 您的代码不起作用，因为导入路径违反了此规则：

./导入必须以或开头../。

替换@为已解析的路径应该可以解决问题。假设@别名为<projectRoot>/srcand router.jsis in <projectRoot>/src，您可以替换@为./：

return [
  {
    path: `/${path}`,
    name: titlePlural,
    component: () => import(`./views/${module}/index.vue`),
  },                         
  {
    path: `/${path}/:id`,
    name: titleSingular,
    component: () => import(`./views/${module}/Single.vue`),
  },                         
  {
    path: `/${path}/new`,
    name: `New ${titleSingular}`,
    component: () => import(`./views/${module}/New.vue`),
  },                         
]

演示（Vite 2）