cesium vue开发环境与部署环境相关问题
作者：互联网
开发环境：vscode vue cesium
本机测试环境：应用、数据和接口都部署于iis
生产环境：应用和数据都部署于tomcat，接口部署于iis
由于不同环境对应的接口和数据路径均不同，为了避免在代码中频繁更改地址，查询了vue环境下相对路径的相关知识，结合本次开发环境，记录如下：
1、关于publicPath: vue.config.js里，module。exports中有publicPath的定义，定义为'./'，表示一个相对路径，即jindex.html的当前路径，比如将打包后的应用置于tomcat\webapps\testPath下，tomcat IP为192.168.100.200:6060，则该相对路径为http://192.168.100.200:6060/testPath/。
2、开发环境该publicPath指向内存中的根节点，通过http://localhost:808x/webpack-dev-server可以查询
3、基于publicPath的理解，可以在编辑器环境定义两个json文件，一个定义为configServe.json,一个定义为configBuild.json,分别配置数据网址和后端接口网址，在vue.config.js中利用CopyWebpackPlugin函数，分别将两个文件拷贝到根目录：
if(process.env.NODE_ENV==='production')({//生产环境
....
new CopyuWebpackPlugin([{ from:'configBuild.json',to:'config.json'}]),
...
}
else{//开发环境
....
new CopyuWebpackPlugin([{ from:'configServe.json',to:'config.json'}]),
...
}
from:指的是编辑环境的相对路径？configBuild.json和configServe.json均和vue.config.js在同一目录下，to：相对于publicPath，
另外在编辑环境里的import命令里的相对路径都是相对于编辑环境，而js里的相对路径是相对与publicPath？
4、通过第3步，无论运行npm run serve或者运行npm run build都会在根目录里存在一个config.json,但实际对应的是编辑环境的两个定义文件configServe.json和configBuild.json,在main.js里使用fetch函数
fetch（“config.json").then(res=>res.json()).then(json=>{
window.config=json;
new Vue({...}).%mount('#app')
},将配置信息存入全局变量window.config，并运行Vue主应用，即可在以后的代码中使用该配置信息。
5、由于config.json并未参与打包，所以可以在部署到不同主机时通过修改该config.json，实现动态配置的目的。
6、初次将应用部署于iis时，加载cesium数据时不显示，是因为iis的MIME类型里没有b3dm的定义，在网站中筛选MIME,添加，文件扩展名：.b3dm,MIME类型：b3dm/b3dm,即可，
标签：vue,环境,json,publicPath,cesium,相对路径,config 来源： https://www.cnblogs.com/jwwry/p/15566340.html