SpringMvc+Vue项目一起部署

背景

    最近公司的项目,开始从传统的JSP转向使用Vue前后端分离的方式,由于大家也是初次接触这种方式,在使用过程中遇到一些问题。今天记录一下之前部署项目遇到的问题。

部署方式

    因为项目内部使用,加之服务器的限制,部署方式,还是使用webpack打包前端项目(npm/cnpm build)之后,将dist目录放在SpringMVC项目的webapp目录下,然后,打包maven项目,放在tomcat下即可直接通过dist中的index.html来访问整个项目了。

部署中的问题

访问之后路径被拦截

    正常部署之后,可以直接通过 ip:port/上下文/dist/index.html开始访问自己的项目的。但是,我部署了测试环境之后访问却提示路径被拦截。
原因:
    后端自己使用了shiro来拦截相关的请求,很明显访问的请求过滤器拦截了。在shiro的过滤路径中增加配置 /dist/** = anon 的配置,即:dist开头的目录不拦截。

访问出现404

    对应的请求找不到相关的服务,需要在 SpringMVC配置文件中增加映射路径配置 <mvc:resources mapping="/dist/**" location="/dist/"/> 即:配置对应的静态资源访问,这样部署到tomcat之后,可以直接访问到对应的静态文件。

页面空白

    上边的修改了之后,发现访问页面是空白的,浏览器F12查看,有报错,大部分静态资源文件js,css没有加载到,具体可以查看网页源码,然后点击对应的静态资源文件路径查看,确实是访问不了。
解决办法:
    修改vue项目中,config目录下,index.js文件中的 assetsPublishPath 的属性,该路径,即为打包之后index.html中静态文件的

评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值