vue3 vite 根据views下的目录自动生成路由

vue3 官网

• https://cn.vuejs.org/

vite官网

• https://vitejs.cn/

vite文档

• https://cn.vitejs.dev/

创建vue项目

# npm 7+, extra double-dash is needed:
npm create vite@latest my-vue-app -- --template vue
# yarn
yarn create vite my-vue-app --template vue

• 安装vue-router

npm install vue-router@4
# 或
yarn add vue-router@4

• 项目目录结构

├── src
│   ├── router
│   	├── index.js
│ 	├── views
│   	├── about
│			├── index.vue
│			├── page.js
│   	├── home
│			├── index.vue
│			├── page.js
│   	├── user
│			├── index.vue
│			├── page.js
│   	├── index.vue
│   	├── page.js
│	├── App.vue
│	├── main.js
│	├── style.css
└── index.html

在vite中自动生成路由

• views/page.js

export default {
    title: 'index',
    menuOrder: 0
};

• router/index.js

import { createRouter, createWebHistory } from 'vue-router';

const comps = import.meta.glob('../views/**/index.vue');
const pages = import.meta.glob('../views/**/page.js', { 
    eager: true, 
    import: 'default' 
});
const routes = Object.entries(pages).map(([path, meta]) => {
    const compPath = path.replace('page.js', 'index.vue');
    path = path.replace('../views', '').replace('/page.js', '') || '/';
    const name = path.split('/').filter(Boolean).join('-') || 'index';
    return {
        path,
        name,
        meta,
        component: comps[compPath]
    }
});

console.log(routes);

export const router = createRouter({
  history: createWebHistory(),
  routes
});

• 生成routes数据

[
    {
        "path": "/about",
        "name": "about",
        "meta": {
            "title": "关于",
            "menuOrder": 3
        },
        component: () => import("/src/views/about/index.vue")
    },
    {
        "path": "/home",
        "name": "home",
        "meta": {
            "title": "首页",
            "menuOrder": 1
        },
        component: () => import("/src/views/home/index.vue")
    },
    {
        "path": "/",
        "name": "index",
        "meta": {
            "title": "index",
            "menuOrder": 0
        },
        component: () => import("/src/views/index.vue")
    },
    {
        "path": "/user",
        "name": "user",
        "meta": {
            "title": "用户",
            "menuOrder": 2
        },
        component: () => import("/src/views/user/index.vue")
    }
]

• main.js

import { createApp } from 'vue'
import App from './App.vue'
import { router } from './router'

createApp(App)
.use(router)
.mount('#app')

运行打包dist

• 安装静态文件服务器来模拟生产环境

npm install -g http-server

• 进入到你的项目根目录，并运行以下命令

http-server dist -p 8000

• http://127.0.0.1:8000