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中静态文件的根路径。修改成相对路径之后，好像还是不行，然后，修改为对应的绝对路径，/projectName/dist 之后，再次部署发现可以访问了。

总结

    由于初次接触Vue项目，对于其中很多的知识点还是不够了解，遇到很多的很多，今后有时间还是需要深入的学习和研究才能避免碰到更多的问题。