vue-admin-template 引入mapbox 矢量样式 sprite和font跨域配置

开发环境正常配置proxytable 没问题，但是build 后发布到正式环境总是有问题

1、矢量地图 图标sprite 跨域访问不到

正式项目cmh部署到http://[域名]:[端口]/[项目名]下，

同时存放sprite图标和font字体的spriteUrl文件夹也存放到同一个服务器下，可分别通过http://[服务器域名]:[端口]/spriteUrl/spriteSVG/sprite.png访问到sprite,http://[服务器域名]:[端口]/spriteUrl/font/ 访问到具体的字体

2、nginx 配置 跨域

  将  服务器的tomcat  修改为新的端口   3333，如原来的端口为8033，代理后的端口则为3333，

 注意，由于spriteUrl 文件夹已经在服务器的tomcat下，所以可以用http://[服务器域名]:[代理端口]/spriteUrl/**来访问具体的font和sprite即这里的http://[服务器域名]:3333/spriteUrl/**，没有必要再在nginx的配置文件nginx.conf 中增加spriteUrl的代理

下面这一步是没有必要的，故

 

 

3、修改 mapbox矢量切片样式文件style.json中的 sprite 和font 路径为 nginx 设置代理后的路径

   

即可实现正确的访问sprite和font

为了方便切换，将地址做成可配置文件，将样式json文件变成js文件，在js文件中导入配置文件，然后处理样式，并exprot样式为json 

下图是配置文件mapStyleConfig.json

在样式文件style.js中对样式的路径进行处理，export json，这样就可以在mapStyleconfig.json中灵活配置代理服务器的地址

如下图 style.js先引入配置文件mapStyleconfig.json，建立josn形式的style 对象

如下图 style.js基于引入的配置处理style，并export style

实际在使用时，只要引入style.js 文件，按mapbox js 脚本方式调用style

4、开发模式下sprite 跨域配置

 配置proxyTable.js

在vue.config.js 中引入 proxyTable.js

修改mapStyleconfig.json中sprite的地址为开发模式时sprite的跨域地址

4、但这样存在一个问题，修改mapStyleconfig.json文件时，开发模式和正式环境模式下既要修改域名和端口，也要修改 sprite跨域，很容易造成混淆，故可以尝试在开发模式下，将原来的sprite跨域配置spriteFontUrl 仍然命名为spriteUrl，这样只需要修改域名和端口

可以看到在开发模式下也能正常访问图标和字体