【vue3】vue路由拆包和自动导入

首先我们开看下src文件夹下router的结构

最外层是index.js我们放routes
然后modules里边放模块路由，
eg：login.js

const list = [
    {
        name: 'login',
        path: '/login',
        component: () => import('@/views/login/index.vue'),
        meta: { title: '登录' },
    },
];
export default list;

然后在index.js里如何拿到导出的list呢

1)基于vite

const files = import.meta.globEager('./modules/*.js');

const get_map = (files) => {
  const map = {};
  Object.keys(files).map((modulePath) => {
    let list = [];
    const file = files[modulePath];
    const name = modulePath.split('/')[2].split('.')[0];
    list = [...file.default];
    map[name] = list;
    return modulePath;
  });
  return map;
};

const map = get_map(files);

2)基于webpack

const request = require.context('./modules', true, /\.js$/);//返回是一个方法

const get_map = (request) => {
  const map = {};
  request.keys().map(path => {
    const context = request(path).default || request(path);
    const name = (path.split('.')[1]);
    const key = name.substr(1,name.length - 1);
    const list = [...context];
    map[key] = list;
    return path;
  });
  return map;
};
const map = get_map(request);

最后具体往routes里导入内容的时候就很简单了

const routes = [
  {
	....
  },
  //登录
  ...(map.login || []),
]