部署Vue+Inertia.js+Laravel到Heroku时Vue组件不显示且JSON解析报错

现象 #

完成数据库安装、迁移及部署后，页面未渲染Vue组件，反而显示Blade视图，浏览器控制台抛出以下错误：

Uncaught (in promise) Syntaxerror: "undefined" is not valid JSON
    at JSON.parse (<anonymous>)
    at xv (app-92582981.js:15:889)
    at app-92582981.js:91:42271

相关配置 #

• package.json的scripts字段：

"scripts": {
    "dev": "vite",
    "build": "vite build && vite build --ssr"
},

• Procfile内容：

web: vendor/bin/heroku-php-apache2 public/

补充信息 #

• 本地执行npm run build & php artisan serve运行正常，无此错误
• Heroku已安装clearDB、Node.js及PHP相关依赖包
• 项目仓库：plestau/tweetyproject

解决方案 #

1. 排查Inertia响应异常 #

JSON解析错误的核心原因是后端未返回Inertia要求的JSON响应，而是直接输出了Blade视图，需重点检查：

• 确认所有前端路由都通过Inertia::render()返回Vue组件，而非调用view()返回Blade文件
• 检查Heroku环境变量APP_URL是否设置为当前应用的Heroku域名，Inertia依赖正确的URL生成逻辑
• 执行heroku logs --tail查看后端日志，排查是否有报错导致响应内容异常

2. 修正前端构建脚本与Heroku构建流程 #

当前build脚本重复执行vite build，可能导致资源生成混乱，先调整package.json：

"scripts": {
    "dev": "vite",
    "build": "vite build"
},

同时确保Heroku自动执行前端构建：
在composer.json中添加post-install钩子，保证依赖安装后触发前端构建：

"scripts": {
    "post-install-cmd": [
        "npm install",
        "npm run build"
    ]
}

或配置Heroku多构建包（先Node.js后PHP），确保前端构建在后端部署前完成。

3. 配置Apache路由重写 #

创建public/.htaccess文件（若不存在），添加Laravel路由重写规则，确保单页应用路由能正确指向入口文件：

<IfModule mod_rewrite.c>
    <IfModule mod_negotiation.c>
        Options -MultiViews -Indexes
    </IfModule>

    RewriteEngine On

    # 处理授权头
    RewriteCond %{HTTP:Authorization} .
    RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]

    # 移除尾部斜杠
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_URI} (.+)/$
    RewriteRule ^ %1 [L,R=301]

    # 所有请求转发到index.php
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule ^ index.php [L]
</IfModule>

4. 验证SSR配置（若启用） #

如果项目使用SSR，需确认：

• 存在正确的SSR入口文件（如resources/js/ssr.js）
• config/inertia.php中的ssr配置指向正确的生成脚本
• 若使用独立SSR服务，需调整Procfile启动对应的进程，确保资源足够支撑运行

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