vite 动态 import 引入打包报错解决方案

Posted 2023-03-25

参考技术A

之前一直是使用 webpack 构建项目， 但是那种随着项目越来越大 运行、打包、热更新缓慢 带来的无奈。。。

新项目开发果断使用了 vite2.0 , 和 webpack 对比起来， 其他的优点不是很直观，但在 运行、打包、热更新 方面简直倍数差距， 只能说我觉得 vite2.0 很舒服。

当然 vite 作为热门构建共建优点还是很多的，详情可以去官网看看 vite 官网地址

之前使用 webpack 构建项目一直使用动态导入 require.context API 自动化注册组件及路由；

转移到 vite 之后，开发习惯当然不能变；随即使用的是 import.meta.globEager 完成动态导入；

本地开发过程中很舒服没问题，打包后部署到服务器报错找不到动态导入的文件；裂开~~~

经过这几天陆陆续续的尝试最终解决，总结了以下几种方案

主要项目结构

文件内部

组件内部通过定义

vite 动态导入有两种方式

以下方案有需要自行取舍

使用 import.meta.glob

缺点：

但是你可以用单独文件夹来区分，我认为限制性太大不够优雅；

使用 router.ts

使用 import.meta.glob 和 import.meta.globEager

使用 router.ts （路由注册）

使用 main.ts （组件注册）

使用 import.meta.glob 的 then 方法， 加上路由内置 addRoute（） 方法注册
缺点：

使用 router.ts

vue3 动态加载组件动态引入组件

1.问题
在做一个用vite构建的vue3项目时，动态拉取导入.vue页面，然后控制台一直有以下提示，页面也无法渲染出来。

2.分析
根据上面的报错提示，让我们安装并使用：@rollup/plugin-dynamic-import-vars 这个插件（最终没有这个方案）。

Vite官方文档说需要使用Glob 导入形式，然后看了一个Glob的文档，解决了这个问题（亲测可行）。

首先需要使用特殊的import.meta.glob函数从文件系统导入多个模块：

const modules = import.meta.glob('../views/*/*.vue');

他会匹配并导入所有相关的组件：

// vite 生成的代码
const modules = 
  './views/foo.vue': () => import('./views/foo.vue'),
  './views/bar.vue': () => import('./views/bar.vue')

那么回到项目中，在home文件夹下的index.vue文件中导入custom_components文件夹下的所有.vue文件

因此，根据vite的import.meta.glob函数：就可以获得对应的custom_components文件夹下的.vue文件

const changeComponents = (e:string)=>
	const link = modules[`../custom_components/$e.vue`]
	console.log(link,'link')

打印link可以看到

最后就是异步注册组件

layouts.value = markRaw(defineAsyncComponent(link))

3.最后
下面贴出完整案例，仅供参考。有更好的或者需要优化的可以提问一起探讨。

<template>	
	<div @click="changeComponents('kk')">显示kk.vue</div>
	<div @click="changeComponents('index')">显示index.vue</div>
	<component :is="layouts"/>
</template>

<script lang='ts' setup>
	const modules = import.meta.glob('../custom_components/*.vue');
	let layouts = ref<any>(null)
	const changeComponents = (e:string)=>
		const link = modules[`../custom_components/$e.vue`]
        layouts.value = markRaw(defineAsyncComponent(link))
	
</script>