vue3和vite实现vue-router4版本路由的配置以及自动生成路由配置

这个是普通的手动路由配置：https://blog.csdn.net/weixin_68658847/article/details/130071101

官方文档

自动路由配置

创建项目

npm create vite@latest my-vue-app -- --template vue
// 或者
yarn create vite my-vue-app --template vue

// 安装路由
yarn add vue-router@4.3.2
// 安装自动路径导入插件
yarn add vite-plugin-pages --dev

下面是项目结构

src
├─App.vue
├─main.js
├─style.css
├─views
|   ├─index.vue
|   ├─user
|   |  └[username].vue
|   ├─home
|   |  ├─index.vue
|   |  ├─iii
|   |  |  ├─[id].vue
|   |  |  ├─index.vue
|   |  |  ├─aaa
|   |  |  |  └index.vue
|   ├─about
|   |   └index.vue
├─router
|   └index.js
├─components
|     └HelloWorld.vue
├─assets
|   └vue.svg

在vite.config.js做以下配置

import {
   
    defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Pages from 'vite-plugin-pages'
// https://vitejs.dev/config/
export default defineConfig({
   
   
  plugins: [vue(),Pages({
   
   
    // 这里可以配置插件选项，例如路由的目录等,这里我指定了遍历的文件夹是src/view目录
    dirs