vue前端项目部署的一点小tip
一个典型的前后端分离项目,前端分用户入口和管理员入口,一般希望这样部署:
https://mydomain.com/ 普通用户入口
https://mydomain.com/admin/ 管理员入口
关键就是在vite.config.ts里要这么指定base:
base: './'
这样build出来的文件,不管放在哪个项目下面都可以正常运行,因为它使用的是相对路径。
相应的,在nginx里面需要这样配置:
server {
listen 8888;
server_name mydomain.com;
location / {
root F:/Projects/front-user/dist;
index index.html index.htm;
}
location /admin/ {
alias F:/Projects/front-admin/dist/;
index index.html index.htm;
}
location /proapi {
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $http_host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header User-Agent $http_user_agent;
proxy_redirect off;
proxy_pass http://127.0.0.1:8100;
}
}
后端程序取客户端IP地址的时候,首先从Header里面取X-Real-IP,取不到再考虑request.remode_addr之类的直接取法。
这样部署基本就可以了。

浙公网安备 33010602011771号