vite dynamic import 怎么实现

Question

如图，我想这样引入，提示我不成功，
我配置了rollup-dynamic-import还是不行，是我配置的不对吗

============== 2021-05-11 补充 ==============

很多人加我QQ问我，其实这个问题是vite1时候问的，那时候动态导入确实比较麻烦

vite2发布之后，glob import 这个API能满足大家的需要

Answer 1

统一回答一下，这是去年的提问了。其实早在vite2发布的时候就已经有新的解决方案了，vite2官方提供了glob-import 方法，之前加我QQ的不用加啦

Answer 2

害，折腾了一下，虽然方法不完美，还有限制，但是好歹算是解决了，生产环境正常运行
https://github.com/qiaen/huam...
运行结果
http://mulan.diumx.com/#/

// 1.先识别所有的views/文件夹name/*.vue文件
// 这里限制性很高，只有路径为/views/文件夹name/*.vue，的文件才能背识别，如果不在这个结构，自己增加吧，然后再合并
const modules = import.meta.glob('../views/*/*.vue');
// 上面的结果是一个对象，相当于
const modules ={
    "../views/daily/index.vue": () => import("/src/views/daily/index.vue")
}

// 2.动态导入的时候直接，引用
{
    path: 'xxxx',
    name: 'xxxxx',
    // 原来的方式，这个在开发中可行，但是生产中不行
    // component: () => import(`../views${menu.file}`),
    // 改成下面这样
    component: modules[`../views${menu.file}`]
}

Answer 3

问题解决了吗？我也是卡在这里了，打包后找不到动态路由文件

Answer 4

打包的时候将动态引入这块动态改写一下，就行了。从一个别人项目里找到了一种方法。

1. vite.config.js中配置

transforms: [
dynamicImportTransform(process.env.NODE_ENV === 'production'), // 生产build时进行这个操作
]

2.dynamicImportTransform

import glob from 'glob';
import {Transform} from 'vite/dist/node/transform.js';
function getPath(path: string) {
const lastIndex = path.lastIndexOf('.');
if (lastIndex !== -1) {
path = path.substring(0, lastIndex);
}
return path.replace('src/views/modules', '');
}
const dynamicImportTransform = function (enableDynamicImport: boolean): Transform {
return {
test(ctx) {
const { path } = ctx;
// Only convert the file
return path.includes('src/utils/doDynamicImport.ts') || path.includes(src\\utils\\doDynamicImport.ts);
},
transform(ctx) {
const { code } = ctx;
if (!enableDynamicImport) {
return code;
}
// Only convert the dir
try {
const files = glob.sync('src/views/modules//.{vue,tsx}', { cwd: process.cwd() });
// @ts-ignore
const result = `
export default function (id) { console.log('id:' + id); switch (id) { ${files.map((p: string) =>` case '${getPath(p)}': return () => import('${p.replace('src/views', '/@/views')
.replace(////g, '/')}');`.replace('.tsx', '')
) .join('n ')}
default: return Promise.reject(new Error("Unknown variable dynamic import: " + id)); } }nn
`;
return result;
} catch (error) {
console.error(error);
return code;
}
},
};
};
export default dynamicImportTransform;

3.src/utils/doDynamicImport.ts
export default function (name) {
return name;
}

4.在动态导入组件的地方直接用doDynamicImport('组件路径'). 打包的时候上面第3个那块代码会被第2条的逻辑给替换掉。
这里判断下。打包的时候才是这个逻辑。否则还是之前的
defineAsyncComponent(isDevMode()?()=>import('组件路径'):doDynamicImport('组件路径'))

Answer 5

import { defineAsyncComponent } from 'vue'

component: (path) => defineAsyncComponent(() => import(${path}.vue))

https://github.com/vitejs/vit...