如何配置Vite开发服务器通过端口代理路径运行？答案

【问题标题】：How to configure Vite dev server for running through a port proxy path?如何配置Vite开发服务器通过端口代理路径运行？
【发布时间】：2023-01-16 23:24:22
【问题描述】：

我正在尝试在基于云的开发环境中使用 Vite 开发服务器能够服务并连接到端口，但需要通过代理路径访问它们。

而不是http://localhost:3000/index.html我会访问例如https://my.cool.example.com/proxy/3000/index.html。在引擎盖下，云服务翻译 URL 并通过代理连接：所以对于 Vite 来说，我只是在请求/index.html。

...但是我在vite.config.js 中尝试过的各种配置还没有使它正常工作：

按照this answer 中的建议设置base 抱怨“服务器配置了公共基础 URL /proxy/3000/”
server.base、proxy、publicPath 和类似的其他几个不成功的实验

我如何告诉 Vite 客户端和资产应该在请求上设置路径前缀，但服务器可以从 root 服务？

【问题讨论】：

标签： vue.js vite

【解决方案1】：

我有完全相同的问题文档说https://github.com/http-party/node-http-proxy#options 上有更多代理选项

https://vitejs.dev/config/#server-proxy

【讨论】：

欢迎提供指向解决方案的链接，但请确保您的答案在没有它的情况下也有用：add context around the link 这样您的其他用户就会知道它是什么以及为什么会出现，然后引用您链接的页面中最相关的部分以防目标页面不可用。

【解决方案2】：

我解决这个问题的方法是在 nginx 的反向代理上做很多事情文件名.conf在你的域 conf 中的文件你需要设置类似的东西

 location /admin {
        include /etc/nginx/includes/proxy.conf;
        proxy_pass        https://your-service:8081;
    }

    location ^~ /@vite {
        include /etc/nginx/includes/proxy.conf;
        proxy_pass            https://your-service:8081;
    }
    location /__vite_ping {
        include /etc/nginx/includes/proxy.conf;
        proxy_pass        https://your-service:8081;
    }
    location /src {
        include /etc/nginx/includes/proxy.conf;
        proxy_pass        https://your-service:8081;
    }
    location /node_modules {
        include /etc/nginx/includes/proxy.conf;
        proxy_pass        https://your-service:8081;
    }

代理配置文件文件这样看

xy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_buffering off;
proxy_request_buffering off;
proxy_http_version 1.1;
proxy_intercept_errors on;

在你的里面vite配置文件你必须做那样的事情

server: {
    https: true, 
    host: "0.0.0.0",
    port: 8081,
    secure: false,
    strictPort: true,
    hmr: {
      port: 8081,
      host: "localhost",
    }, 
  },

重要的想法是要覆盖主机的 hrm 值，并且端口需要与您在 docker 上公开的端口相同

的服务价值docker-compose.yml

ports:
      - '8081:8081'

在索引.html你必须更新脚本源路径

从< script type="module" src="/src/main.js" >

到< script type="module" src="https://localhost:8081/src/main.js" >

【讨论】：