Laravel9+Vite构建后URL自动追加/build/的问题求助

开发者阿泽

2026-8-18

解决Laravel 9 + Vite + Vue 3路由链接自动追加/build/的问题

问题原因

构建后路由自动带/build/是因为Vite默认将构建产物输出到public/build目录，并且自动设置了base为/build/，导致Vue Router的路由前缀被覆盖。

解决步骤

1. 修改Vite配置文件

在项目根目录的vite.config.js中，明确设置base为根路径：

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

export default defineConfig({
    plugins: [
        laravel({
            input: 'resources/js/app.js',
            refresh: true,
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],
    // 关键：设置base为根路径
    base: '/',
});

2. 确保Vue Router的base配置正确

在Vue Router的初始化文件（比如resources/js/router/index.js）中，确保createRouter的history选项里的base设置正确：

import { createRouter, createWebHistory } from 'vue-router';
import Main from '../views/Main.vue';
import Index from '../views/Index.vue';

const routes = [
    { path: '/', component: Main },
    { path: '/index', component: Index },
];

// 这里的base如果不设置，默认会取Vite的base值，确保它是根路径
const router = createRouter({
    history: createWebHistory('/'),
    routes,
});

export default router;

3. 检查Laravel的路由 fallback

在routes/web.php中，确保SPA的 fallback 路由正确指向入口页面：

Route::get('/', function () {
    return view('welcome');
});

// 所有其他路由都指向SPA入口
Route::get('/{any}', function () {
    return view('welcome');
})->where('any', '.*');