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...