Блог

Я пытаюсь динамически загружать компоненты с помощью Vite и Vue3, чтобы компоненты вообще не загружались, которые не используются. Это прекрасно работает в режиме разработки, но как только я запускаю сборку npm, компоненты не могут быть загружены, потому что Vite неправильно определяет пути.

это мое main.js Файл

 import { createApp, defineAsyncComponent } from 'vue' import App from '@/App.vue'  const components = Object.assign(  import.meta.glob("./components/**/*.vue"),  import.meta.glob("./widgets/**/*.vue") )  for (const k in components) {  const name = k.split("/").pop().replace('.vue', '');  app.component(name, defineAsyncComponent(() =gt; import(k))); }  

Таким образом, компоненты загружаются из пути ./components/input/input.vue и добавляются в компоненты по имени файла.

После того, как я запускаю сборку npm, Vite создает надстройку с уменьшенными файлами в папке dist/assets, которая выглядит следующим образом: input.a08d9c39.js

Когда я делаю консоль.войдите в components, он пытается загрузить его по тому же пути, что и в режиме разработки, поэтому ./components/input/input.vue, что неверно в режиме prod.

Я не уверен, что если vite.config.js файл необходим для решения, тем не менее, это файл.

 import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import { resolve } from "path";  export default defineConfig({  plugins: [  vue(),  ],   resolve: {  alias: {  '@': resolve(__dirname, './src'),  },  } })