Laravel 9+Vue 3构建后URL带build前缀问题求助

1. 修改Vite配置文件（vite.config.js） #

默认Vite会把构建产物输出到public/build目录，这是URL出现build前缀的核心原因。调整配置让产物直接输出到public根目录：

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

export default defineConfig({
    base: '/', // 资源路径基准设为根目录
    plugins: [
        laravel({
            input: 'resources/js/app.js',
            refresh: true,
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],
    build: {
        outDir: 'public', // 构建产物输出到public根目录
        emptyOutDir: true, // 构建前清空输出目录（注意：会删除public下原有文件，若有自定义文件如robots.txt需提前备份）
        rollupOptions: {
            output: {
                // 将静态资源归类到assets子目录，避免根目录混乱
                assetFileNames: 'assets/[name].[hash][extname]',
                chunkFileNames: 'assets/[name].[hash].js',
                entryFileNames: 'assets/[name].[hash].js',
            },
        },
    },
});

2. 调整Vue路由的基准URL #

确保Vue Router的历史模式基准路径为根目录，修改resources/js/app.js中的路由初始化代码：

const router = createRouter({
    history: createWebHistory('/'), // 直接指定根目录作为路由基准
    routes,
});

如果偏好使用环境变量控制，可在项目根目录的.env文件中添加：

VITE_BASE_URL='/'

然后保持路由代码不变：

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

3. 清理旧构建产物并重新构建 #

1. 删除public/build目录（若存在），避免残留文件干扰
2. 执行构建命令：

npm run build

4. 验证配置 #

部署后访问http://127.0.0.1:8000/和http://127.0.0.1:8000/about，URL将不再带有build前缀。

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