Laravel Vite集成Vue2时资源加载500错误排查求助

1. 修正Vite配置的输出目录与资源路径映射 #

Laravel的@vite指令依赖Vite配置里的参数生成正确资源路径，你的产物存在public/js/dist/assets，需要调整配置让Laravel能正确识别：

修改项目根目录的vite.config.js，补充/调整以下内容：

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/js/container/user/detail.js'],
            // 指定构建产物在public下的存放目录，对应你的public/js/dist
            buildDirectory: 'js/dist',
        }),
    ],
    // 配置资源基础URL，确保浏览器请求路径正确
    base: '/js/dist/',
});

• buildDirectory：Laravel Vite插件会把构建产物放到public/{buildDirectory}下，和你的实际存储路径对应。
• base：设置资源的基础访问路径，避免浏览器请求时出现路径错误。

2. 确保@vite指令的引用路径正确 #

在blade模板里，@vite要对应Vite配置的入口路径，或者直接引用生产环境的构建产物：

// 开发环境（对接Vite dev server）
@vite('resources/js/container/user/detail.js')

// 生产环境（也可以直接用asset助手指向构建好的文件）
<script src="{{ asset('js/dist/assets/detail-xxxxxx.js') }}"></script>

注：如果用@vite指令，Laravel会自动根据环境切换路径，但前提是buildDirectory配置正确且产物已生成。

3. 检查public目录权限 #

500错误可能是服务器没有读取public/js/dist/assets的权限，执行以下命令修复：

chmod -R 755 public/js/dist
chown -R www-data:www-data public/js/dist # 根据你的服务器运行用户调整

4. 清除缓存并重新构建 #

缓存可能导致路径解析异常，按以下步骤操作：

• 清除Laravel缓存：php artisan cache:clear && php artisan config:clear
• 删除旧构建产物：rm -rf public/js/dist
• 重新执行构建：npm run build

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