本人尝试写了个工具，已公布到npm，地址：
https://www.npmjs.com/package...

欢送大家试用~ 这里先贴个文档，后续说一下实现思路

介绍

依据你所提供的router对象，主动地创立对应页面文件目录以及.vue组件文件（SFC）

帮忙你省去反复繁冗的页面目录及文件的创立操作

应用场景

例如，依据个别的vue-router配置，假如咱们在文件里输入了一个router:

// ./src/router/index.jsimport { createRouter, createWebHashHistory } from 'vue-router';import Component1 from '../views/page1/Component1.vue'const routes = [  {    path: '/page1',    component: Component1,  },  {    path: '/page2',    component: () => import('../views/page2/Component2.vue'),    children: [      {        path: '/page2-1',        component: require('../views/page2-1/Component3.vue').default;,      }    ]  }];const router = createRouter({  history: createWebHashHistory(),  routes,})export default router

执行auto-vue-route-sfc的命令后，你将在我的项目目录下看到主动生成的对应页面目录和文件：

your-project/src│└─views    ├─page1    │      Component1.vue    │    └─page2        │  Component2.vue        │        └─page2-1                Component3.vue

性能

  • 反对对vue-router3、vue-router4的应用
  • 反对的模块加载语法：import、import()、require()

  • 反对你对import()、require()进行本人的封装，比方：

    const YourImport = (src) => process.env.NODE_ENV === 'development' ?                    require(src).default :                    () => import(src) // 仅生产环境应用懒加载const routes = [  {    path: '/page1',    component: YourImport('./Component.vue'), // 你封装的import办法  }]const router = new VueRouter({ routes })export default router
  • ❌暂不反对ts

使用指南

筹备

请确保你曾经装置了vue-router，并且有一个输入了router对象（export default router）的文件

装置

npm i -D auto-vue-route-sfc

创立配置文件

根底

在我的项目根目录下创立一个配置文件auto-vue-route-sfc.config.js，内容示例如下：

module.exports = {    entry: './your/router-dir/index.js',    routerDir: './your/router-dir'}

其中：

  • entry: 是你输入router对象（export default router）的文件
  • routerDir: 是你的路由功能模块所在的目录

额定性能：应用别名

反对门路别名的应用，能够在auto-vue-route-sfc.config.js中按如下配置：

module.exports = {    entry: './src/router/index.js',    routerDir: './src/router',    // 应用别名    alias: {        '@': './src',        '$': './xxx',        'srcxxx': './src/xxx'    }}

不创立配置文件的状况

若我的项目根目录下没有发现auto-vue-route-sfc.config.js，则将被默认视为如下配置：

{    entry: './src/router/index.js',    routerDir: './src/router',    alias: {}}

若你是应用vue-cli创立的自带vue-router的我的项目，则默认配置与你我的项目的目录门路是统一的，无需做额定的更改和配置。

运行命令

形式一

关上终端，在根目录下运行

npx auto-vue-route-sfc

形式二

能够在我的项目package.json中配置script命令

 // package.json "scripts": {    "serve": "vue-cli-service serve",    "build": "vue-cli-service build",    "lint": "vue-cli-service lint",    "auto:sfc": "npx auto-vue-route-sfc" // 新增命令  },

而后在终端运行

npm run auto:sfc

如若顺利，你将看到你的页面目录、组件文件被主动地创立在我的项目下！

留神

  • 你能够随时减少新的路由配置，而后运行这个工具来生成对应的新目录和新页面文件。曾经被你编写过的旧目录和旧页面文件是不会被笼罩的:)
  • ❌然而对于更改或者删除旧路由，这个工具不会更改或删除旧目录、旧页面文件，因为它还不是一个页面目录的管理器:(