Vuejs 3 -在vitejs中require.context的替代方案是什么

o8x7eapl  于 2023-01-14  发布在  Vue.js
关注(0)|答案(4)|浏览(1860)

我正在寻找一种方法,使相同的逻辑require.context的webpack在vitejs,我发现这个插件名为vite-plugin-import-context,我尝试了一下,但有一些东西,我不明白这是import dynamicImport from '../src/index'的基本用法:

import { UserConfigExport } from 'vite';
import vue from '@vitejs/plugin-vue';

import dynamicImport from '../src/index';// <-- this is not described

export default (): UserConfigExport => {
  return {
    plugins: [vue(), dynamicImport(/*options*/)],
  };
};
nuypyhwy

nuypyhwy1#

在使用Vite时,源代码中不应使用require。它仅适用于ESM。对于Vite v2,可以使用import.meta.globEager。对于Vite〉v2,不推荐使用import.meta.globEager。请改用import.meta.glob('*', { eager: true })

ssm49v7z

ssm49v7z2#

import. meta.glob()是require.context()的webpack替代方法。自v2.3.4起,它已添加到vite中。
下面是文档的链接https://vitejs.dev/guide/features.html#glob-import

sbtkgmzw

sbtkgmzw3#

是的,这个例子直接取自examples folder in the repo,所以它只在那个repo中工作。
如果您通过npm或yarn安装插件,则该行应该类似于import dynamicImport from 'vite-plugin-import-context'

9vw9lbht

9vw9lbht4#

下面是我如何导入所有插件/模块:
main.ts

import { createApp } from 'vue';
import App from './App.vue';

const app = createApp(App);

// styles here
import '@/assets/styles/tailwind.css';
import '@/assets/styles/main.scss';

// install all modules under `modules/`
Object.values(
  import.meta.glob<{ install: (ctx: any) => void }>('/src/modules/*.ts', { eager: true })
).forEach((module) => module.install?.(app));

app.mount('#app');

下面是我如何在modules文件夹中准备好要导出的内容:
模块/pinia.ts

import { createPinia } from 'pinia';

export const install = (app: any) => {
  app.use(createPinia());
};

模块/路由器.ts

import type { RouteRecordRaw } from 'vue-router';
import { createRouter, createWebHashHistory } from 'vue-router';

import generatedRoutes from '~pages';
import { setupLayouts } from 'virtual:generated-layouts';

const routes: RouteRecordRaw[] = setupLayouts(generatedRoutes);

const router = createRouter({
  history: createWebHashHistory(),
  routes,
});

export const install = (app: any) => {
  app.use(router);
};

相关问题