vue.js - 如何配置Vite开发服务器通过端口代理路径运行？

Question

我正在尝试在基于云的开发环境中使用 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提示“服务器配置了一个公共(public)基础 URL/proxy/3000/”
• 使用 server.base、proxy、publicPath 和类似的其他几个不成功的实验

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

Answer 1

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

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

proxy.conf 文件是这样看的

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.config 中，你必须做类似的事情

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'

在 index.html 上，您必须更新脚本源路径

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

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