如何从Laravel路线提供生成的Vue应用？

Question

我没有默认设置vue + laravel，vue与laravel完全分开。 就我而言，laravel仅作为API。 我完成了一个vue应用，并完成了生产的build命令。

我以这种形式获得了生成的资源：

我在考虑如何将这样的应用程序上传到主机，并得出结论，我需要通过laravel服务器发送vue文件。

我在routes / web.php中写了route：

Route::get('{uri}', function ($uri = '/') {
    $sourceByUri = public_path('_frontend/' . $uri);

    if (is_file($sourceByUri)) {
        return file_get_contents($sourceByUri);
    }

    $indexSpa = public_path('/_frontend/index.html');

    return file_get_contents($indexSpa);
})->where('uri', '.*');

我的api可以正常工作，但是_frontend文件夹中的文件未正确发送（css不适用）。 屏幕截图

应该是这样的： 屏幕截图

事实证明，来自服务器的所有响应都值得使用Content-Type: text/html

如何通过服务器正确打开应用程序？

Answer 1

您应该直接通过Nginx提供服务，并配置反向代理以通过Laravel访问API：

首先，配置您的laravel应用程序，以便Nginx可以为其提供服务（我让Nginx在此配置的随机端口上进行监听）：

server {
    listen 1222;

    root /var/www/html/your-app/public;
    index index.php;

    location / {
        try_files $uri $uri/ /index.php?$query_string;
    }

    # Insert PHP configs here etc...
}

然后，为您的Web应用程序提供服务，并使转到/api端点的呼叫转到您的laravel应用程序而不是您的前端应用程序。 如果要通过http服务，请使其监听端口80；如果要通过https服务，请使其监听443：

server {
    listen 80;
    server_name your-app.com;

    root /var/www/your-app/public/_frontend;

    location /api {
        # Backend server to forward requests to/from
        proxy_pass          http://localhost:1222;
        proxy_http_version  1.1;
        proxy_set_header        X-Real-IP       $remote_addr;
        proxy_set_header        X-Forwarded-For $proxy_add_x_forwarded_for;
        client_max_body_size 500M;
    }

    location / {
        try_files $uri /index.html;
    }
}

Answer 2

从这个示例中 ，我了解了如何将Vue CLI与Laravel结合使用。