使用 Vite 创建 Vue 3 项目并手动配置路由的完整步骤（路由404）

使用vite勾选创建路由

1. 创建 Vue 3 项目

首先确保你已经安装了 Node.js（建议版本 16+）和 npm/yarn/pnpm。

# 使用 npm
npm create vite@latest vue3-vite-router -- --template vue

# 或使用 yarn
yarn create vite vue3-vite-router --template vue

# 或使用 pnpm
pnpm create vite vue3-vite-router --template vue

2. 进入项目目录并安装依赖

cd vue3-vite-router

# 安装基础依赖
npm install
# 或 yarn
yarn
# 或 pnpm
pnpm install

# 安装 vue-router
npm install vue-router@4
# 或
yarn add vue-router@4
# 或
pnpm add vue-router@4

3. 配置路由

3.1 创建路由文件结构

src/
├── router/
│   └── index.js
├── views/
│   ├── HomeView.vue
│   ├── AboutView.vue
│   └── NotFoundView.vue
├── App.vue
└── main.js

3.2 配置路由文件 (src/router/index.js)

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

// 导入视图组件
import HomeView from '../views/HomeView.vue'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView
    },
    {
      path: '/about',
      name: 'about',
      // 路由懒加载
      component: () => import('../views/AboutView.vue')
    },
    {
      // 404 页面
      path: '/:pathMatch(.*)*',
      name: 'not-found',
      component: () => import('../views/NotFoundView.vue')
    }
  ]
})

export default router

3.3 修改 main.js

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

const app = createApp(App)

app.use(router)

app.mount('#app')

4. 创建视图组件

src/views/HomeView.vue

src/views/AboutView.vue

src/views/NotFoundView.vue

5. 修改 App.vue

6. 运行项目

npm run dev
# 或
yarn dev
# 或
pnpm dev

7. 可选的高级配置

动态路由

// 在 router/index.js 中添加
{
  path: '/user/:id',
  name: 'user',
  component: () => import('../views/UserView.vue')
}

路由守卫

// 在 router/index.js 中添加
router.beforeEach((to, from, next) => {
  document.title = to.meta.title || 'My Vue App'
  next()
})

嵌套路由

{
  path: '/dashboard',
  name: 'dashboard',
  component: () => import('../views/DashboardView.vue'),
  children: [
    {
      path: 'profile',
      component: () => import('../views/DashboardProfile.vue')
    },
    {
      path: 'settings',
      component: () => import('../views/DashboardSettings.vue')
    }
  ]
}