芋道源码:VUE3部署:避坑--验证码不现显示,管理后台无法访问后端接口等,完善中。。。
起因:
测试芋道源码vue3部署到服务器,实现域名访问。
本人采用的是宝塔面板安装方式
其实别的安装方式原理都相同,可以采取自己喜欢的方式即可。
大致安装步骤看芋道源码的过程即可,本文主要解决无法解决前端找不到后端问题,适合跟我一样小白的选手,高手请略过。
错误信息1:
后台验证码不显示

若是IP部署的话不存在这个问题,只有域名时候才会有
原因:没有将请求正确的发送到后端,
解决方法:在前端也设置一个伪静态(芋道手册仅设置一个方式404错误的伪静态),将前端代码转换到后端的域名中,还是识别的admin-api、app-api
完整伪静态代码放下面
# 请将伪静态规则或自定义NGINX配置填写到此处
location / { try_files $uri $uri/ /index.html; ## 重要!!!解决前端刷新 404 问题
}
# -----------------以上是安装说明上解决404问题的----------
# -----------------------------------------------------
# -----------------下面是解决问题添加的一个代理-----------
# -----------------域名是后端绑定的域名------------------
# 请将伪静态规则或自定义NGINX配置填写到此处
location /admin-api/ { ## 后端项目 - 管理后台proxy_pass https://liyan.fengxiang.cn/admin-api/; ## 重要!!!proxy_pass 需要设置为后端项目所在服务器的 IPproxy_set_header Host $http_host;proxy_set_header X-Real-IP $remote_addr;proxy_set_header REMOTE-HOST $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}location /app-api/ { ## 后端项目 - 用户 Appproxy_pass https://liyan.fengxiang.cn/app-api/; ## 重要!!!proxy_pass 需要设置为后端项目所在服务器的 IPproxy_set_header Host $http_host;proxy_set_header X-Real-IP $remote_addr;proxy_set_header REMOTE-HOST $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
将下面的添加上,问题就解决了,就是因为芋道源码教程说明这地方说的比较含糊。所以容易卡在这,希望有帮助。
