vue3 添加路由和静态资源前缀 （ Vite 项目）

要为 Vite 项目中的 Vue 路由添加路由前缀，可以通过在 Vue Router 配置中设置 base 或通过修改 publicPath 来实现。

方法 1: 在 vue-router 中设置 base 前缀

首先，确保你使用的是 vue-router，然后在创建路由时，设置 base 选项来指定前缀。

假设你的路由配置文件为 src/router/index.ts，你可以像下面这样设置路由的 base 前缀：

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  }
]

const router = createRouter({
  history: createWebHistory('/your-prefix/'),  // 设置前缀
  routes
})

export default router

这里 /your-prefix/ 就是你希望添加的路由前缀，所有路由都将自动加上该前缀。

方法 2: 在 Vite 配置文件中设置 base 前缀

另一种方法是修改 vite.config.js 文件中的 base 配置项。这会影响整个应用的基础路径（例如，资源文件、路由等）。

在 vite.config.js 中添加 base 配置项：

export default defineConfig({
  base: '/your-prefix/',  // 设置路由前缀
  // 其他配置项
})

这样做会为项目中的所有资源、路由、以及其他引用的路径加上 /your-prefix/ 前缀。

注意：

• 方法 1 中的 createWebHistory('/your-prefix/') 只会影响 Vue Router 的路由前缀。
• 方法 2 中的 base: '/your-prefix/' 影响的是所有的资源路径和路由。

你可以根据需要选择适合的方式，通常情况下建议使用方法 1 来专门设置 Vue Router 的路由前缀，而使用方法 2 来设置整个应用的基础路径。