vue 路由中 vite 与webpack 动态 导入的方法汇总

vite 动态导入路由:

router/index.js文件

javascript 复制代码
//vite 下面寻找 views 文件夹下面所有的page.js文件
let pageList = import.meta.glob('../views/**/page.json', {
  eager: true,
  import: 'default',
});
//所有的文件
const modules = import.meta.glob('../views/**/**.vue');

//遍历
let pages = Object.entries(pageList).map(([path, meta]) => {
  let pathName = path.slice(8, -10);
  let name = pathName.slice(1).split('/').join('-');
  let fileName = path.slice(0, -10);
  let fixFileName = fileName.split('/').pop();
  let filePath = fileName + '/' + fixFileName + '.vue';

  return {
    path: pathName,
    name: name,
    component: modules[filePath],
    meta,
  };
});

 routes: [
    {
      path: '/',
      name: 'layout',
      redirect: '/home',
      component: () => import('../components/layout/layout.vue'),
      meta: {
        title: '首页',
      },
      children: pages,
    },
    {
      path: '/login',
      name: 'login',
      component: () => import('../views/login.vue'),
      meta: {
        title: '登录',
      },
    },
  ],

以下是 截图:

这个是webpack 动态导入路由:

javascript 复制代码
//读取配置文件
const context = require.context('../components/page', true, /\.json$/);
//读取路由文件
const contextVue = require.context('../components/page', true, /\.vue$/);

let fileObj = {};
//动态读取文件
contextVue.keys().map(key => {
    let keyName = key.slice(1);
    fileObj[keyName] = contextVue(key).default;
});

let routerPathArr = [];
//动态配置路由
context.keys().forEach(key => {
    let obj = context(key);
    let compKey = obj['componentPath'];
    let routeObj = {
        path: obj['path'],
        name: obj['name'],
        component: fileObj[compKey],
        meta: obj['meta']
    };
    routerPathArr.push(routeObj);
});

以下是截图:

相关推荐
木心操作4 分钟前
js生成excel表格进阶版
开发语言·javascript·ecmascript
GISer_Jing4 分钟前
sqb&ks二面(准备)
前端·javascript·面试
谢尔登9 分钟前
【Webpack】模块联邦
前端·webpack·node.js
前端码虫13 分钟前
2.9Vue创建项目(组件)的补充
javascript·vue.js·学习
Bottle41426 分钟前
深入探究 React Fiber(译文)
前端
夜宵饽饽26 分钟前
上下文工程实践 - 工具管理(上篇)
javascript·后端
汤姆Tom32 分钟前
JavaScript Proxy 对象详解与应用
前端·javascript
BillKu32 分钟前
Vue3中app.mount(“#app“)应用挂载原理解析
javascript·vue.js·css3
xiaopengbc38 分钟前
在 React 中如何使用 useMemo 和 useCallback 优化性能?
前端·javascript·react.js