Vue-element-admin项目使用Nginx初体验

Posted 2023-03-01

参考技术A nginx这个名词听了多年，好似是搞什么反向代理。很多人在用，我却没尝试过。因为不了解，所以误解。

开始还以为一定要用什么IIS，然后再代理什么的。用了两天才搞明白一点，nginx可以取代iis, 当然这是我初次的判断。开始用nginx缘于用vue-element-admin搞的一个项目要发布到生产环境，官方介绍说生产环境下的跨域建议用nginx解决。然后从昨天开始尝试，开始用起来很懵。

a. vue-element-admin用npm run build:prod打包到dist，路径为：D:/AppCode/StPlatform/dist

b. 后端接口.net core3.1开发，用IIS发布，http://127.0.0.1:8031/api/index.html,  接口中都有api这样一段

c. 前端项目发布在同一服务器，http://localhost:8088

1. vue中不需要作什么特别的设置, 也贴一下截图吧

后端的请求接口都是以/api开头的，要把这些接口都代理到http://localhost:8031上解决跨域问题，接口本来就是在. 开始反向代理不成功，就是这里没有理解，看到一些网上的实例/prod-app为代理，且把vue中的VUE_APP_BASE_API = '/Prod-Api'， 再在nginx.conf中设置location /Prod-Api  ...... ，结果一次又一次的反向代理不成功，后来想到不能不理解的模仿别人，我后台接口中有/api，没有/prod-api这样的接口，应是直接按接口中这样的反向代理设置，最后果然成功了。

一切才刚刚开始，以后得好好学习nginx了，神奇！