vue.js - VueJS 应用程序没有被 nginx 正确代理

问题描述

我正在尝试nginx在本地计算机上设置代理服务器并将两个单独的端点转发到两个VueJS在我的本地机器上运行的两个应用程序。

此nginx代理服务器侦听端口 5000 并监视/app-1和分别监视/app-2哪些代理localhost:8080，localhost:8081即：

localhost:5000/app-1将被转发到localhost:8080和
localhost:5000/app-2将转发至localhost:8081

这是我在nginx.conf文件中的内容：

server {

    listen       5000;
    server_name  localhost;

    location /app-1/ {
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_pass http://localhost:8080/;
    }

    location /app-2/ {
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_pass http://localhost:8081/;
    }

    error_page   500 502 503 504  /50x.html;

    location = /50x.html {
        root   html;
    }

}

上面的代码出现错误：

似乎VueJs找不到应用程序的入口文件。是否需要添加某种相对路径location？

我设法使它与一个应用程序一起工作，文件中包含以下内容nginx.conf：

server {

    listen       5000;
    server_name  localhost;

    location / {
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_pass  http://localhost:8080/;
    }

    error_page   500 502 503 504  /50x.html;

    location = /50x.html {
        root   html;
    }

}

以上成功代理localhost:8080，我的Vue应用程序在浏览器中成功运行，如图所示。

当我尝试替换为时location /，location/app-1/我再次遇到同样的404 (Not Found)错误。

我该如何解决这个问题？

尝试实现上述目标的目的是模拟两个应用程序在我的本地机器上的相同域名上运行，以便两个应用程序可以访问相同的localStorage. localStorage包含将JWT用于进行 API 调用的一个。如果用户已经在中进行了身份验证app-1，则他/她不需要app-2再次进行身份验证。

在生产中，两个应用程序将部署在相同的域名上，因此可以访问相同的localStorage. 我希望在我自己的本地机器上复制相同的生产环境。

标签： vue.jsnginxproxy

从图像中的错误来看，页面似乎能够加载，然后它尝试从中加载app.js，这很奇怪，因为您在和http://localhost:5000/js/app.js下提供 Vue.js 应用程序。/app-1//app-2/

所以我认为问题在于您如何服务/构建 Vue.js 应用程序而不是 nginx 代理问题。

如果您正在使用Vue CLI，

默认情况下，Vue CLI 假定您的应用程序将部署在域的根目录

您需要将publicPathvue.config.js设置为/app-1/和/app-2/。

我希望这会有所帮助。

vue.js - VueJS 应用程序没有被 nginx 正确代理

问题描述

解决方案

推荐阅读