typescript - Vite + Vue Router - Dynamiska importer

Jag använder Vite tillsammans med Vue 3 för ett personligt projekt och har vue-router@4 för mina rutter. Eftersom varje av mina moduler använder samma uppsättning rutter, skapade jag en hjälpfunktion:

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

Problemet jag står inför är dock att Vite inte verkar stödja dynamiska importer.

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

Jag tittade på den angivna länken för att se begränsningarna, men mitt mönster verkar matcha det som stöds.

Varför fungerar inte min kod? Allt verkar vara okej men jag får ovanstående varning (och ett fel i konsolen när jag försöker besöka några rutter med dynamiska importer).

Om det hjälper, är felet jag får i konsolen:

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

Svar #1

UPPDATERING: Vite 3.x (för närvarande 3.0.0-alpha.7) stöder nu alias i dynamiska importer. Du kan installera det med:

npm i -D vite@alpha

demo (Vite 3)

Vite 2.x: Din kod fungerar inte eftersom importvägarna bryter mot denna regel:

Importeringar måste börja med ./ eller ../.

Att ersätta @ med den lösta sökvägen bör lösa problemet. Om vi antar att @ är aliaserat till <projectRoot>/src och router.js finns i <projectRoot>/src, kan du ersätta @ med ./:

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`),
  },                         👆
]

demo (Vite 2)

Relaterade artiklar