开发环境: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,即可,