1.一个域名代理多个前端项目,在域名后面用前缀做区分
2.例如:www.baidu.com,指向多个项目:www.baidu.com/a 、www.baidu.com/b
注:项目打包一定要放在主域名项目的根路径下面
3.nginx配置如下
# nginx配置如下
server {
listen 80;
server_name www.baidu.com;
client_max_body_size 10m; #(改成你想要的数值)
location / {
root /www/wwwroot/h5/;
index index.html;
}
location /a {
alias /www/wwwroot/a/;
index index.html;
}
location /b {
alias /www/wwwroot/b/;
index index.html;
}
}
4.uniapp 项目配置
# manifest.json 配置
"h5" : {
"publicPath" : "/a/", # 如果Nginx代理多个前端项目,此路径为Nginx前端的前缀,否则为空
"devServer" : {
"https" : false,
"proxy" : {
"/api" : {
"target" : "http://www.baidu.com", //后端的服务器地址
"changeOrigin" : true,
"ws" : true,
"pathRewrite" : {
"^/api" : ""
}
}
}
},
"router" : {
"base" : "/a/" # 如果Nginx代理多个前端项目,此路径为Nginx前端的前缀,否则为空
}
}
5.请求后端接口封装的http.js配置
const baseUrl = '/a/api'; // nginx 配置代理,前端项目的前缀
const baseUrl = '/b/api'; // nginx 配置代理,前端项目的前缀
location /a { // 前端uniapp项目代理的路径
alias /www/wwwroot/hscj/h5/a;
index index.html;
}
以上的api后端请求的前缀,要以nginx代理后端的前缀一致
location /api {
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header Host $host;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_pass http://127.0.0.1:8085/;
}