Vue.js History模式部署问题：Laravel+Vue项目前端404求助

核心问题分析 #

API请求正常说明Laravel后端路由配置无误，前端页面404是因为History模式下直接访问前端路由（如/about）时，服务器会尝试寻找对应物理文件，找不到则返回404。需要通过.htaccess将非API的请求转发到Vue的index.html，同时保留API请求到Laravel的index.php。

具体解决方案 #

1. 确认Laravel入口文件路径正确性 #

检查public_html/index.php（Laravel的入口文件）中的路径配置，确保指向正确的Laravel项目目录：

// 调整路径为服务器上的实际Laravel项目位置
require __DIR__.'/../Home/laravelProject/vendor/autoload.php';
$app = require_once __DIR__.'/../Home/laravelProject/bootstrap/app.php';

2. 配置public_html下的.htaccess文件 #

替换或创建public_html/.htaccess，添加以下规则——优先处理API请求，其余非静态资源请求转发到Vue的index.html：

<IfModule mod_rewrite.c>
    RewriteEngine On

    # 转发API请求到Laravel入口文件
    RewriteRule ^api/(.*)$ index.php/$1 [L]

    # 排除实际存在的文件/目录，避免静态资源（css/js/img）被错误转发
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    # 转发所有前端路由请求到Vue的index.html
    RewriteRule ^(.*)$ index.html [L]
</IfModule>

3. 检查Vue项目配置 #

• 确保Vue路由启用History模式：

const router = new VueRouter({
  mode: 'history',
  routes: [...]
})

• 打包时设置正确的根路径（vue.config.js中）：

module.exports = {
  publicPath: '/' // 对应域名根路径，无需额外修改
}

4. 验证服务器环境 #

• 确认Apache服务器已开启mod_rewrite模块；
• 检查public_html目录权限，确保静态资源可正常访问。

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