Eros开发框架自动路由配置的实现

最新推荐文章于 2024-07-26 15:35:59 发布

FoxMale007

最新推荐文章于 2024-07-26 15:35:59 发布

阅读量709

点赞数 1

分类专栏： java技术

本文链接：https://blog.csdn.net/applebomb/article/details/85713767

版权

java技术专栏收录该内容

54 篇文章 1 订阅

订阅专栏

弄过两个EROS项目，每次配置路由上总是有多多少少的差错，这次又要上一个页面较多的项目，下决心要把自动路由整一下，解放手动配置，“懒”出点新的高度。

EROS项目配置甚是麻烦，vue-router每添加个页面配置一次就罢了。EROS框架得要配置两次，分别是：

webpack打包配置——该配置在项目的confing/eros.dev.js，指定了哪些文件打包入bundle，如果没打包成功，您会得到一个-1002的错误；
router配置——该配置在项目的src/js/config/routes.js，如果配置不正确，会得到一个“跳转页面不存在”的友情提示；

接下来搞定这两个配置

1. webpack打包配置

eros.dev.js下原来的配置长这样（凑字数开始）

// appBoard，mediator 不建议进行修改如果修改了也请对应修改
module.exports = {
'eslint': false,
'webpackWarnings': false,
'exports': [
// appBoard
'js/config/index.js',
// mediator
'js/mediator/index.vue',
// home
'js/pages/hello.vue'
],
'alias': {
'Components': 'js/components',
'Common': 'js/common',
'Config': 'js/config',
'Widget': 'js/widget',
'Pages': 'js/pages',
'Utils': 'js/utils'
},

红色的部分即要获取的路径，路径均是以js为根路径得到vue的相对地址。然后就....

...然后要知道webpack是基于node.js，nodejs本来就是基于js的编程工具，下面要用点程序语言的“基本”功能：递归扫描目录，nodejs的扫描目录代码百度一大把，随便拎个过来改改（懒惯了-_-b）。这里有一点要注意的就是，扫描的目录是以当前运行目录为根，因为我的执行BAT放到项目根了，那么就是从项目根开始进行路径扫描配置。

// appBoard，mediator 不建议进行修改如果修改了也请对应修改

const fs = require("fs");

const exportFiles = [ //保留官方推荐入口
   'js/config/index.js',
'js/mediator/index.vue',
];

readDirSync("src/js/pages");

function readDirSync(path){
   var pa = fs.readdirSync(path);
   pa.forEach(function(ele,index){
       var info = fs.statSync(path+"/"+ele)
       if(info.isDirectory()){
           readDirSync(path+"/"+ele);
       }else{
           exportFiles.push(path.replace(/src\//,'') + "/" + ele);
       }
   })
}

module.exports = {
'eslint': false,
'webpackWarnings': false,
'exports': exportFiles,
'alias': {
'Components': 'js/components',
'Common': 'js/common',
'Config': 'js/config',
'Widget': 'js/widget',
'Pages': 'js/pages',
'Utils': 'js/utils'
},

然后运行eros dev，好了，目录下扫描的文件都出来了，配置完成。

2. router配置

使用webpack的require.context特性，我们可以扫描并获取vue文件的目录，可以参见我之前写的 react下自动配置文章。然后先看看路由配置原来长啥样（继续凑字数）：

// 这里的后缀都是 .js 因为打包出来的都是js文件，而不是.vue文件，我们要告诉客户端跳转那个js

// 这里的路径和dev.json路径的区别
// pages里面配置的是路由跳转的地址，也就是dev生成的 dist文件夹下的js bundle路径从dist/js开始
// dev.json 的 exports 需要打包的js地址，填入src的需要被打包成js bundle的地址从src开始

export default {
'eros': {
title: 'eros',
url: '/pages/hello.js'
}
}

按照路由名:{url:<地址>}生成一个配置对象。然后就...

然后就扫描一下路径地址，这里要注意的是，执行地址是从dist路径开始的，所以你不要纳闷为什么会有那么多 ../ 的存在（从dist找到js目录，确实要绕那么一大段路）

// 这里的后缀都是 .js 因为打包出来的都是js文件，而不是.vue文件，我们要告诉客户端跳转那个js

// 这里的路径和dev.json路径的区别
// pages里面配置的是路由跳转的地址，也就是dev生成的 dist文件夹下的js bundle路径从dist/js开始
// dev.json 的 exports 需要打包的js地址，填入src的需要被打包成js bundle的地址从src开始

const routes = {
'eros': {
title: 'eros',
url: '/pages/hello.js'
},
};

/*
@Author JIM
自动配置路由，路由模式：
name=文件名小写
url=文件pages下路径
例如文件位置在appointment/AppointmentStep1.vue，那么name=appointmentStep1,url=/pages/appointmentflow/AppointmentStep1.js
*/
(r => {
return r.keys().map(key => {
let groups = /\.(.+\/(\w+))\.vue/g.exec(key);
const name = groups[2].substring(0,1).toLowerCase()+groups[2].substring(1);
routes[name] = {
url: '/pages' + groups[1] + '.js'
}
});
})(require.context('./../../../src/js/pages', true, /^\.\/.*\/.*\.vue$/)); //从dist目录出发

export default routes;