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);
});

以下是截图:

相关推荐
baiduopenmap7 分钟前
百度世界2024精选公开课:基于地图智能体的导航出行AI应用创新实践
前端·人工智能·百度地图
loooseFish15 分钟前
小程序webview我爱死你了 小程序webview和H5通讯
前端
小牛itbull18 分钟前
ReactPress vs VuePress vs WordPress
开发语言·javascript·reactpress
请叫我欧皇i27 分钟前
html本地离线引入vant和vue2(详细步骤)
开发语言·前端·javascript
533_30 分钟前
[vue] 深拷贝 lodash cloneDeep
前端·javascript·vue.js
guokanglun35 分钟前
空间数据存储格式GeoJSON
前端
GIS瞧葩菜39 分钟前
局部修改3dtiles子模型的位置。
开发语言·javascript·ecmascript
zhang-zan1 小时前
nodejs操作selenium-webdriver
前端·javascript·selenium
ZBY520311 小时前
【Vue】 npm install amap-js-api-loader指南
javascript·vue.js·npm
猫爪笔记1 小时前
前端:HTML (学习笔记)【2】
前端·笔记·学习·html