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 来设置整个应用的基础路径。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值