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

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

关注公众号： 微信搜索 前端工具人 ; 收货更多的干货

原文链接： 自己掘金文章 https://juejin.cn/post/6951557699079569422/

关注公众号： 微信搜索 前端工具人 ; 收货更多的干货

一、介绍

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

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

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

二、问题

// 问题代码 () => import( /* @vite-ignore */ `${fileSrc}`)
routerList.push({
path: `/${routerPath}`,
name: `${routerName}`,
component: () => import( /* @vite-ignore */ `${fileSrc}`)
})


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

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

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

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

三、需求

主要项目结构

├── components // 公共组件存放目录
└── views // 路由视图存放目录
└── Home // Home 页面
└── components // Home 页面封装组件存放文件
└── HomeHeader.vue // Home 页面头部组件
└── index.vue // Home 主入口
└── types // Home页面专属类型
└── Login // Login 页面
└── components // Login 页面封装组件存放文件
└── LoginHeader.vue // Login 页面头部组件
└── index.vue // Login 主入口
└── types // Login页面专属类型
....
....


文件内部

export default defineComponent({
name: 'home',
isRouter: true,
isComponents: false,
setup() {
...
}
})


组件内部通过定义

• name: 路由组件名称
• isRouter： 是否自动为路由；
• isComponents： 是否自动注册为公共组件

四、 解决 （推荐方案二）

vite 动态导入有两种方式

• import.meta.glob: 通过动态导入默认懒加载，通过遍历加 then 方法可拿到对应的模块文件详情信息

• import.meta.globEager: 直接引入所有的模块, 即静态 import; 我的就是使用该方案打包部署报错

以下方案有需要自行取舍

4.1 方案一

使用 import.meta.glob

缺点：

• 不使用 then 方法拿不到模块信息，无法进行判断是否需要自动注册组件或路由；
• 使用了 then 方法成异步的了， 路由渲染的时候文件还没获取成功注册不到

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

// global.ts
export const vueRouters = function (): Array<RouteRecordRaw> {
let routerList: Array<RouteRecordRaw> = [];
const modules = import.meta.glob('../views/**/*.vue')
Object.keys(modules).forEach(key => {
const nameMatch = key.match(/^\.\.\/views\/(.+)\.vue/)
if(!nameMatch) return
const indexMatch = nameMatch[1].match(/(.*)\/Index$/i)
let name = indexMatch ? indexMatch[1] : nameMatch[1];
// 首字母转小写 letterToLowerCase 首字母转大写 letterToUpperCase
routerList.push({
path: `/${letterToLowerCase(name)}`,
name: `${letterToUpperCase(name)}`,
component: modules[key]
});
})
return routerList
};


使用 router.ts

import { vueRouters } from '../services/global'
const routes: Array<RouteRecordRaw> = [
{
path: '/',
name: 'Login',
component: () => import('@/views/Login/index.vue')
},
...vueRouters()
]

4.2 方案二 “推荐”

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

• import.meta.glob： 因为 import.meta.glob 获取到的文件就是懒加载的，避免了使用 import 语句， 所以打包后不会报错不存在动态引入了
• import.meta.globEager：不使用 then 也能获取到文件全局上下文进行有需要的判断

// global.ts
function getModules() {
const components = import.meta.glob('../views/**/*.vue')
return components
}
function getComponents() {
const components = import.meta.globEager('../views/**/*.vue')
return components
}
// 自动注册组件
export const asyncComponent = function (app: App<Element>): void {
const modules = getModules();
const components = getComponents();
Object.keys(modules).forEach((key: string) => {
const viewSrc = components[key];
const file = viewSrc.default;
if (!file.isComponents) return
const AsyncComponent = defineAsyncComponent(modules[key])
app.component(letterToUpperCase(file.name), AsyncComponent)
});
// console.log(app._component.components)
};// 自动注册路由
export const vueRouters = function (): Array<RouteRecordRaw> {
let routerList: Array<RouteRecordRaw> = [];
const modules = getModules();
const components = getComponents();
Object.keys(modules).forEach(key => {
const viewSrc = components[key];
const file = viewSrc.default;
if (!file.isRouter) return
// 首字母转小写 letterToLowerCase 首字母转大写 letterToUpperCase
routerList.push({
path: `/${letterToLowerCase(file.name)}`,
name: `${letterToUpperCase(file.name)}`,
component: modules[key]
});
})
return routerList
}

使用 router.ts （路由注册）

import { vueRouters } from '../services/global'
const routes: Array<RouteRecordRaw> = [
{
path: '/',
name: 'Login',
component: () => import('@/views/Login/index.vue')
},
...vueRouters()
]

使用 main.ts （组件注册）

import { asyncComponent } from './services/global';
export const app = createApp(App)
asyncComponent(app)


4.3 方案三

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

缺点：

• 由于文件懒加载获取， 页面加载有明显的的卡顿
• 不适用于注册组件
• addRoute() 方法适用于根据后台接口返回的路由权限注册鉴权路由

// global.ts
export const vueRouters = function (router: Router): void {
let routerList: Array<RouteRecordRaw> = [];
const modules = import.meta.glob('../views/**/*.vue')
for (const path in modules) {
modules[path]().then((mod) => {
const file = mod.default;
if (!file.isRouter) return
// 首字母转小写 letterToLowerCase 首字母转大写 letterToUpperCase
router.addRoute({
path: `/${letterToLowerCase(file.name)}`,
name: `${letterToUpperCase(file.name)}`,
component: file
})
})
}
};


使用 router.ts

import { vueRouters } from '../services/global'
const routes: Array<RouteRecordRaw> = [
{
path: '/',
name: 'Login',
component: () => import('@/views/Login/index.vue')
}
]
const router = createRouter({
history: createWebHashHistory(),
routes
})
vueRouters(router)