vue contextPath的思考

先说我这边的情况，目前项目都是前后端分离开发的，上线有种部署方式，常见的就是前后端分开部署，这是比较常见的，我这边因客户原因，打包一起进行部署比较简单，交付技术运维部方便后期其他现场部署，由于场景不同，没有使用分布式，更别谈微服务，只是单体，因为大部门客户企业也就是几十个人，也有几万用户，但是真正使用的也就是100多号人，所以用不到微服务和分布式，不过对于分布式方式也进行预留扩展机制，上面的背景说好了，说下问题；采用集成前后端集成部署好处时简单方便，维护量也很少，直接启动下exe即可，这个场景确实在大部客户那边都没问题的，目前遇到了一个比较正轨的大公司，内部网络错综复杂，还有划分了各个网络，例如生产网、办公网、DM区，等等，就是很多网络环境；目前客户要求不仅仅要在生产网能够访问，还要支持其他几个网络访问，例如办公网、互联网、信息网等等，在使用nginx做代理时发现了一个问题，vue打包时，静态资源默认static和其他方式，这个vue模式不是hash模式，也就是没#,类似这样的模式http://host+port/#/xx；由于我这边是多个业务系统组合而来的，那么代理的时候不可能都统一走 / 根请求访问，需要根据不同的contextPath进行调用不同的静态资源，问题出来了，例如我有个A系统，contextPath路径是/a, nginx里配置location /a 代理到A系统即可，一切一切看似都没问题，这样操作后发现问题了，后端的服务地址都是通过/a正常转到A系统了，但是前端静态资源没有走/a;

例如：

  代理后正常这样的：             

             后端 http://host+port/a/api/xxx,

             前端 http://host+port/a/static/xxx

  问题是前端变成了http://host+port/static/xxx 这样，直接打到nginx根路径/上了,那这样一定有问题的。

     怎么解决呢？

方法有很多种：

         1、因为静态资源是放在后端服务器的资源里的，可以在springboot里的contextPath统一添加路径例如/a,这样是可以的。（我这边没有采用这种方案，想和其他现场尽可能的保持统一，方便后期运维）

         2、前端能否进行统一调整，也不会影响其他现场，这样就可以保持统一了，按照这个思路我就了解了下vue的打包过程，确实是支持的。

在assetsDir里可以进行设置，例如设置成 commonFront/static,这样就可以了，或者为了代理方便可以直接设置a/static都是可以的，我这边为了方便其他现场统一，所以进行了统一设置。设置好后，那边请求前端的路径就变成了这样：http://host+port/commonFront/static/xxx

这样就好办了，在nginx在加一层location即可，location  /commonFront 就可以了，这样处理不仅仅兼容了其他现场，也能支持后期定制化，减少不一致问题