Vue3项目子目录部署配置路由base后router-link不生效怎么办

1. 修正Vue Router 4.x的base参数配置 #

Vue Router 4.x已将base配置项从createRouter入参移除，改为作为createWebHistory（含createWebHashHistory、createMemoryHistory）构造函数的第一个入参数传入，你使用的是Vue Router 3.x的旧写法，因此配置不生效。
修正后的路由配置代码：

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

const router = createRouter({
  history: createWebHistory('/VueApp/'), // base参数写在此处
  routes
})

配置修正后<router-link>组件会自动为所有跳转路径拼接/VueApp/前缀。

2. 补充Vite公共路径配置 #

项目用Vite构建，部署到子目录还需要在vite.config.js中添加全局base配置，否则打包后静态资源、路由初始访问都会出现404问题：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  base: '/VueApp/', // 与路由base配置保持完全一致
  plugins: [vue()],
  // 其他原有配置
})

3. 本地验证配置（可选） #

如果需要在本地开发环境提前验证子目录部署效果，可以补充Vite开发服务配置：

export default defineConfig({
  base: '/VueApp/',
  server: {
    open: '/VueApp/' // 服务启动后自动打开子目录路径
  },
  plugins: [vue()]
})

启动开发服务后访问对应路径即可验证路由跳转逻辑是否正常。

内容的提问来源于stack exchange，提问作者kolja