在 Vue Router 4 中，如何设置base参数

在 Vue Router 4 中，base参数应该设置在 createWebHistory()函数中。以下是完整的设置方法：

1. 基本设置

复制代码

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

const router = createRouter({
  history: createWebHistory('/your-base-path/'),  // 在这里设置 base
  routes,
})

2. 不同场景的配置

场景一：部署在子目录

复制代码

// 例如：https://example.com/admin/
const router = createRouter({
  history: createWebHistory('/admin/'),
  routes,
})

场景二：部署在根目录

复制代码

// 默认部署在根目录
const router = createRouter({
  history: createWebHistory(),  // 不传参数，默认为根目录
  // 或者显式指定
  history: createWebHistory('/'),
  routes,
})

场景三：动态配置（推荐）

复制代码

// 使用环境变量
const base = import.meta.env.BASE_URL || '/'

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

3. 配合构建工具的配置

使用 Vite

复制代码

// vite.config.js
export default defineConfig({
  base: '/my-app/',  // 这里设置构建时的 base
  // ...
})

// router/index.js
const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes,
})

使用 Vue CLI

复制代码

// vue.config.js
module.exports = {
  publicPath: process.env.NODE_ENV === 'production' 
    ? '/production-sub-path/' 
    : '/'
}

// router/index.js
const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes,
})

4. 完整示例

复制代码

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

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

// 如果应用部署在 https://example.com/my-app/
const router = createRouter({
  history: createWebHistory('/my-app/'),
  routes,
})

export default router

注意事项

base 必须以斜杠开头和结尾

复制代码

// 正确
createWebHistory('/my-app/')

// 错误
createWebHistory('my-app')
createWebHistory('/my-app')

实际访问 URL
- 设置 base: '/my-app/'后
- /about路由的实际访问 URL 是：https://example.com/my-app/about
开发环境和生产环境
- 开发环境通常使用 /
- 生产环境根据实际部署路径设置
服务器配置
- 需要确保服务器正确配置，将所有路由重定向到 index.html

选择最适合你项目部署场景的配置方式即可。