Vue.js+Laravel5.6前后端分离应用共享主机部署及500错误排查

嘿，我之前在部署Vue+Laravel前后端分离项目到共享主机时，也踩过这个500错误的坑，尤其是路由相关的问题特别常见。咱们一步步来排查解决：

1. 先确认共享主机的目录映射是否正确 #

共享主机默认的网站根目录一般是public_html，而Laravel的核心入口是public/index.php。很多人容易直接把整个Laravel项目上传到根目录，这会导致服务器找不到正确的入口文件，进而触发“未定义GET路由”的错误。

解决办法：

• 要么把Laravel项目public目录下的所有文件/文件夹直接上传到public_html，然后修改public_html/index.php里的路径，让它指向上级目录的Laravel核心文件。比如原来的：

  require __DIR__.'/../vendor/autoload.php';
  $app = require_once __DIR__.'/../bootstrap/app.php';
  

  如果你的Laravel核心文件放在public_html的上级目录（比如命名为laravel），就改成：

  require __DIR__.'/../laravel/vendor/autoload.php';
  $app = require_once __DIR__.'/../laravel/bootstrap/app.php';
  

• 或者联系主机服务商，把网站根目录修改为你上传的Laravel项目的public文件夹（有些主机支持后台修改）。

2. 处理Vue SPA路由与Laravel API的冲突 #

因为你的前端是Vue单页应用，所有前端路由（比如/dashboard、/user/profile）都应该由Vue来处理，而不是Laravel。但共享主机的服务器（大多是Apache）会把这些请求转发给Laravel的index.php，导致Laravel找不到对应的GET路由，最终抛出500错误。

解决步骤：

（1）在Laravel中添加兜底路由 #

打开routes/web.php，在所有路由的最末尾添加一个兜底路由，把所有非API的GET请求转发到Vue的入口文件：

// 确保这个路由在web.php的最后面，让API路由先被匹配
Route::get('/{any}', function () {
    // 如果你的Vue项目打包后把index.html放在Laravel的resources/views里，就返回视图
    // return view('index');
    // 如果Vue打包后的文件在public的dist目录，就直接返回文件内容
    return file_get_contents(public_path('dist/index.html'));
})->where('any', '.*');

注意：你的API路由应该都放在routes/api.php里，Laravel默认会给API路由加上/api前缀，这样就不会和前端路由冲突了。

（2）检查并配置.htaccess文件 #

Laravel的public目录里默认有.htaccess文件，确保这个文件已经上传到你的网站根目录（public_html），并且内容正确：

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

    RewriteEngine On

    # 处理Authorization请求头
    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>

如果主机没开启mod_rewrite模块，需要联系主机商开启，这个模块是Laravel路由正常工作的必要条件。

3. 检查Laravel目录权限 #

Laravel需要storage和bootstrap/cache目录有写入权限，否则会触发内部服务器错误，有时候表面上是路由问题，实际是权限不足。

解决办法：

• 通过FTP工具右键修改这两个目录的权限为755，目录下的文件权限设为644（有些主机可能需要设为775，但绝对不要用777，不安全）。
• 如果有SSH权限，也可以用命令修改：

  chmod -R 755 storage bootstrap/cache
  chmod -R 644 storage/* bootstrap/cache/*
  

4. 查看错误日志找具体原因 #

500错误只是一个笼统的提示，真正的问题藏在Laravel的错误日志里。去storage/logs目录下找最新的日志文件，里面会有详细的错误信息——比如到底是哪个路由未定义，还是数据库配置错误、权限问题等。

比如如果日志里显示Route [GET:/your-frontend-path] not defined，那说明这个请求被Laravel接管了，需要回到第二步调整SPA路由的配置。

5. 确认线上.env配置正确 #

线上的.env文件要和本地区分开，重点检查：

• APP_URL：设置为你的线上域名，比如APP_URL=https://your-domain.com
• APP_DEBUG：调试阶段可以设为true，方便看到详细错误，调试完成后改回false
• 数据库配置：如果你的API用到数据库，要确保DB_HOST、DB_DATABASE、DB_USERNAME、DB_PASSWORD和线上主机的数据库信息一致，否则也会触发500错误。

按照上面的步骤排查，应该能解决这个路由导致的500错误。如果还有问题，把错误日志里的具体信息贴出来，更容易定位问题~

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