问题解决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了,神奇!
nginx配置反向代理解决vue跨域问题
1、vue项目站点url
2、野蔽api接口url
3、在vue项目站点的nginx配散游置文件中添加:
仅颂掘州以此记录,避免后续踩坑。
vue项目部署必须用nginx吗
vue项目部署必蠢宴须用nginx。
vue项目部署使用的是webpack提供的proxyTable做的代带戚银理从而解决了开发环境的跨域请求仔弊问题,需要使用Nginx做反向代理,因此vue项目部署必须用nginx。
vue是一个构建数据驱动的web界面的渐进式框架。