Vue3+TypeScript项目部署XAMPP后路由跳转异常求助

1. 同步Vue Router的base路径 #

光配置Vite的base还不够，必须让Vue Router也使用相同的子路径作为base：

// router/index.ts
import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  // 这里要和vite.config.ts的base完全一致，注意前后斜杠
  history: createWebHistory('/test1/'),
  routes: [
    // 你的路由列表
  ]
})

export default router

2. 确认Vite的base配置格式 #

检查vite.config.ts的base配置，确保格式正确：

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

export default defineConfig({
  plugins: [vue()],
  base: '/test1/' // 必须是带前后斜杠的子路径格式
})

3. 统一使用Vue Router的跳转方式 #

禁止使用原生<a>标签跳转路由，这类链接会直接指向根路径。全部改用router-link或router.push()：

• 正确示例：

  <router-link to="/about">关于页面</router-link>
  <!-- 脚本内跳转 -->
  <button @click="$router.push('/about')">去关于页</button>
  

• 错误示例（会跳转到localhost/about而非localhost/test1/about）：

  <a href="/about">关于页面</a>
  

4. 重新构建并完整部署 #

修改配置后，重新执行npm run build，将dist目录下的所有文件复制到XAMPP的htdocs/test1文件夹，不要遗漏任何文件。

5. 配置Apache的重写规则（针对history模式） #

如果使用的是Vue Router的history模式，需要在test1目录下创建.htaccess文件，添加以下规则避免刷新页面404，同时确保路由基于子路径工作：

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /test1/
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /test1/index.html [L]
</IfModule>

内容的提问来源于stack exchange，提问作者Ali Hameed Al-Hashime