Php 如何为从Laravel route生成的Vue应用程序提供服务？

我没有默认设置vue+laravel，vue与laravel完全分开。 在我的例子中，laravel仅作为API。我完成了一个vue应用程序，并为生产执行了一个

build

命令

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

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

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

Route:：get（'{uri}'，函数（$uri='/'））{
$sourceByUri=公共路径（“前端/”.$uri）；
if（is_文件（$sourceByUri））{
返回文件获取内容（$sourceByUri）；
}
$indexSpa=public_path（'/_frontend/index.html'）；
返回文件获取内容（$indexSpa）；
})->其中（'uri'，'.'）；

我的api正常工作，但文件夹_frontend中的文件未正确发送（css不适用）

应该是这样的：

事实证明，服务器的所有响应都值得

内容类型：text/html

---

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

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

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

然后，为您的webapp提供服务，并在

/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;
    }
}

---

从中，我了解了如何将Vue CLI与Laravel相结合。

您的css和js文件需要从同一路径访问。在index.html中引用它们时，我假设您没有在前端加前缀。所有文件都带有代码200，而且脚本可以工作，问题是无论在哪里

Content-Type:text/html

，我都尝试将

Content-Type

更改为

text/css

，并且都可以工作，但同时所有的响应都带有

text/css

（html、css和其他文件）。我试图获取mime类型：

mime\u内容\u类型（$sourceByUri）

但是对于css和js，它返回

text/plain

啊，我刚刚注意到你的代码试图为所有文件提供服务，而不仅仅是index.html。这可能是个坏主意，通过php/laravel提供文件要比web服务器慢得多。非常感谢你，我会处理这个问题。我搜索了很多，找不到解决问题的方法，看起来这是一种罕见的方法。再次感谢你，我认为没有人会帮助我。没问题。但是我认为最好是将这两个项目完全分开。例如，它们不应该生活在同一个git存储库中。你的项目可以有不同的

.env

文件等。完全分开有助于思考如何deal这些问题。您有两个应用程序，一个服务器端应用程序和一个客户端应用程序。我是否正确理解，如果我这样划分，我是否必须同时为两个主机支付费用？我知道vue有免费的静态主机，但对站点数量有限制。嗯，我不知道，我使用VPS以便您可以配置itok上有无限的网站，我只是一个初学者，还没有vps的经验。我有一个如何解决我的问题的想法，看看我对这个问题的答案。

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;
    }
}