javascript 带有Vue 3 Vite SPA的NGINX-返回白色

w8f9ii69  于 2023-02-18  发布在  Java
关注(0)|答案(1)|浏览(126)

我有以下NGINX配置

events {
    worker_connections  1024;
}

http {
    server {
        listen 80;
        server_name localhost;

        location / {
            root C:/test;
            index index.html;
            try_files $uri $uri/ /index.html;
        }

        location /display/outbound {
            alias C:/test/display/outbound;
            index index.html;
            try_files $uri $uri/ /display/outbound/index.html;
        }

        location /display/outbound/api/ {
            proxy_pass http://localhost:52000/api/;
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        }

        # Serve .js and .css files with the correct MIME type
        types {
            text/html html;
            application/javascript js;
            text/css css;
        }

        # Serve static assets
        location /assets/ {
            alias C:/test/display/outbound/assets/;
        }

        # Serve favicon
        location /favicon.ico {
            alias C:/test/display/outbound/favicon.ico;
        }
    }
}

有三个方面,http://localhost路由返回一个静态html页面,只有一个h1元素。
一个Vue 3 Vite SPA,在http://localhost/display/outbound上提供-据我所知,文件正在正确提供,因为我可以在开发工具的网络选项卡中看到内容。我也没有控制台错误。但是,我只看到一个白色页。
当从http://localhost提供Vue 3应用程序时,它可以正常工作。
我的API的反向代理-当从http://localhost托管我的Vue应用程序时,此功能运行良好
有没有人能给我指出正确的方向。我现在试过很多方法,似乎都不起作用。
当更改我的vite.config.js文件并添加

base: '/display/outbound/',

它服务于应用程序,我可以看到页面等,但JS中断,我得到的过滤器不是一个函数错误。这不会发生在从http://localhost服务时
我不知道如何继续。我已经尝试了我的配置文件的几个变体,都有相同的结果。文件正在服务,没有错误,但空白的白色页。
编辑-我的文件结构如下

  • C:/test -根目录
  • C:/test/index.html-位于http://localhost的静态html页面-可以正常访问
  • C:/test/display/outbound -包含带有图标和index.html的Vue 3项目,以及assets子文件夹
  • C:/test/display/outbound/assets -包含Vue 3 JS、CSS和其他文件

编辑2 -添加DOM图片

提前感谢!如果需要更多的信息,请让我知道。

vsikbqxv

vsikbqxv1#

所以,我通过添加以下内容来解决这个问题

base: '/display/outbound/',

到我的Vite.config.ts文件中。
然而,这现在给我带来了另一个问题,我在Vue 3 Vite SPA Served on NGINX at Sub Root Location - Filter is Not a Function Error中提出了这个问题

相关问题