vite,vue本地开发技巧

在vite本地开发的时候,分前端和后端,一些同学搞不清楚如何用一条natapp隧道,实现穿透

这里我们可以用上nginx的代理分流,vite开发前端一般都比较大,所以推荐不限带宽流量计费型隧道.比如你买的web隧道域名是 http://testxx.natapp4.cc 映射本地端口 80

可以配置一个nginx的vhost 对应你的项目

server {
    listen 80;
    server_name testxx.natapp4.cc localdev;

 location ^~ /api/ {
    proxy_pass http://127.0.0.1:8811/;
    proxy_http_version 1.1;
    proxy_set_header Host 127.0.0.1:8811;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}

    location / {
        proxy_pass http://127.0.0.1:5173;
        proxy_http_version 1.1;
        proxy_set_header Host $host;
    }
}

根据你实际端口来修改,这样 http://testxx.natapp4.cc/ 就对应vite的前端端口 5173,http://testxx.natapp4.cc/api/ 这样就对应后端端口 8811 了.

另外在 在 vite.config.ts 要加上allowedHosts: ['testxx.natapp4.cc','localdev'],

或者webpack-dev-server配置 devServer.disableHostCheck=true

相应的,在 vite 中比如 VITE_API_URL = 'http://127.0.0.1:8811' 等配置写了 后端 8811的地方,直接改成 同源地址VITE_API_URL = '/api/'

这样就实现了,只用一条web隧道,进行vue vite 本地开发.

本机也可以做一个 localdev 的host 到 127.0.0.1,这样本机开发,不用natap 直接访问 http://localdev 即可