前端nginx反向代理vue？

茫然知了 • 2023-09-23 13:14 • 生活指南 • 阅读 72

问题解决1：nginx反向代理丢失js、css问题

对于新版本的vue，需要新增vue.config.js，并添加如下配置，产生的效果是一样的

其实顷肆如用相对路径来解决这个问题雹腔不是最好的方案，甚至 vue-cli4.x 之后，就不雀启支持将 publicPath 设置为 ./ 了。

看了公司的项目及 Nuxt框架的推荐，均是推荐使用绝对路径来设置 publicPath

vue项目部署方式:tomcat部署和nginx部署

一般项目前后端分离得话，都会用nginx作为反向代理冲冲斗转发的。

因为项目要兼容ie9,使用axios发ajax请求的时候,不能通过CORS解决跨域的问题,所以尝试部署nginx作散磨反向代理.

其中 vue+webpack+vue-router(history) 部署到nginx服务器下，非根目录，前后端怎样配置文件这篇文章详细说明了怎么打包vue项目,记得修改config下的index.js文件.

修改为:(只显示修改的部分)

关于nginx的配置,一定需要注意第二篇文章说到的问题;

proxy_pass转发的路径后是否带 “/” 的意义都是不一样的,假设有请求 ,如果配置是第一种情况,不带"/"的话,那么访问的实际是

,直接访问根路径,如果带"/",那么访问的实际是" ",以"/test"作为根路径.

具体配置如下:

因为项目上线，一般需要添加项目名，并且消去vue-router产生的#号，需要在router的配置下，在本项目是router-index.js下配置：

在打包后,会生成dist文件，文件下由以下部分组成：

至此，整个vue项目算是配置完毕，但是部署到tomcat下会出现访问图片没有带根路径的问题，如果你引用图片的方式和我一致，如下：

那么可以尝试的解决方法是，重新配置tomcat的；

首先在tomcat的webapps新建文件夹，文件夹名称和上面配置的根路径一致，即为webSite，然后将打包生成的dist文件夹里面的文件复制到webSite下，并且新建文件 WEB-INF/web.xml:

项目结构为：

找到tomcat的conf文件下的server.xml，配置静态服务,找到HOST标签：

这里的配置为：

参考： tomcat配置静态服务

增加这个文件是因为，解除#号，参考官网：

去除vue项目的#号

这里就直接丢配置判携了：

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

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发布，, 接口中都有api这样一段

c. 前端项目发布在同一服务器，

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

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

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