如何从 Laravel 路由提供生成的 Vue 应用程序？答案

【问题标题】：How to serve generated Vue app from Laravel route?如何从 Laravel 路由提供生成的 Vue 应用程序？
【发布时间】：2023-03-15 04:04:01
【问题描述】：

我没有默认设置vue + laravel，vue完全独立于laravel。在我的情况下，laravel 仅作为 API。我完成了一个 vue 应用程序，并为生产执行了 build 命令。

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

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

我在routes/web.php中写了路由：

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

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

【问题讨论】：

您的 css 和 js 文件需要可从同一路径访问。我假设您在 index.html 中引用它们时没有为 _frontend 添加前缀。
所有文件都带有代码 200，并且脚本可以工作，问题是无处不在 Content-Type: text/html，我尝试将 Content-Type 更改为 text/css 并且一切正常，但同时所有带有text/css(html, css, other files)的回复。 Screenshot
我尝试获取 mime 类型：mime_content_type($sourceByUri)，但对于 css 和 js，它返回 text/plain
啊，我刚刚注意到您的代码尝试提供所有文件，而不仅仅是 index.html。这可能是个坏主意，通过 php/laravel 提供文件比通过 Web 服务器提供文件要慢得多。

标签： php laravel vue.js

【解决方案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;
    }
}

【讨论】：

非常感谢，我会处理的。我用谷歌搜索了很多，找不到解决问题的方法，这看起来像这种罕见的方法。再次感谢，我以为没有人会帮助我。
没问题。然而，我认为最好的办法是将这两个项目完全分开。例如，它们并不意味着存在于同一个 git 存储库中。您的项目可能有不同的.env 文件等...完全划分有助于思考如何处理这些问题。您有两个应用程序，一个服务器端应用程序和一个客户端应用程序
我是否理解正确，如果我分开，我是否必须同时支付两个托管费用？我知道vue有免费的静态托管，但是网站数量是有限制的。
嗯我不知道，我用VPS所以你可以在上面配置无限的网站
好的，我只是一个初级程序员，还没有使用vps的经验。我知道如何解决我的问题，请参阅我对这个问题的回答。

【解决方案2】：

从this example，我了解了如何将 Vue CLI 与 Laravel 结合起来。

【讨论】：