如何通过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不适用）。 Screenshot

应该是这样的：Screenshot

事实证明，来自服务器的所有响应都值得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

从this example开始，我了解了如何将Vue CLI与Laravel结合使用。