要在宝塔面板上部署Vue.js + PHP (Laravel) 的前后端分离项目，你需要按以下步骤操作：
- 安装宝塔面板。
- 在宝塔面板上安装Nginx、PHP、MySQL等必要软件。
- 上传Vue.js前端项目到服务器，并通过Nginx托管。
- 配置Nginx为Vue.js项目提供静态文件服务。
- 配置Nginx作为反向代理，将API请求代理到Laravel后端。
- 上传Laravel后端项目到服务器，并配置相应的环境。
- 配置Laravel的路由，使其能够正确响应API请求。
- 配置Laravel的CORS设置，允许前端Vue.js域名的访问。
- 测试部署是否成功。
以下是相关的配置文件示例：
Nginx配置Vue.js静态文件服务和反向代理：
server {
listen 80;
server_name your-domain.com;
location / {
root /path/to/your/vue-project/dist;
try_files $uri $uri/ /index.html;
}
location /api/ {
proxy_pass http://127.0.0.1:8000; # Laravel 监听的端口
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
}
}
Laravel的路由和CORS配置示例：
// routes/api.php
Route::middleware('api')->group(function () {
Route::get('/endpoint', 'YourController@method');
});
// app/Http/Middleware/Cors.php
namespace App\Http\Middleware;
use Closure;
class Cors
{
public function handle($request, Closure $next)
{
return $next($request)
->header('Access-Control-Allow-Origin', '*')
->header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
// 添加其他需要的CORS头部信息
}
}
// app/Http/Kernel.php
protected $middlewareGroups = [
'api' => [
// ...
\App\Http\Middleware\Cors::class,
],
];
确保你已经正确配置了Laravel的.env文件，包括数据库连接、邮件服务等。
注意：在实际部署时，你需要根据你的实际域名、文件路径和安全需求调整配置。同时，确保服务器的安全性，比如安装和配置SSL证书，设置防火墙规则等。