这是一篇关于如何通过Webpack的配置快速将Vue-cli脚手架与Cesium库整合，最终目的是可以使用Vue+Cesium进行组合编写代码，并可以正确打包Cesium的代码。(百度cesium vue或直接参考https://blog.csdn.net/m0_37972557/article/details/79768408网站)
Vue版本2.5.17，Cesium版本1.50.0。
1、利用Vue-cli脚手架生成标准项目结构，具体过程不赘述了。生成的项目结构如下图所示：
image.png
2、安装Cesium库
执行命令：npm install cesium（或cnpm install cesium --save）
3、手动复制Cesium编译好的静态文件到static文件夹中
进入node_modules\cesium\Build文件夹中，将编译好的Cesium文件复制到根目录下的static中，并把其中的Cesium.js删除
4、设置Webpack的配置项，使其支持Cesium 。
4.1、在build/webpack.base.conf.js下的output中加入sourcePrefix: ' '，让Webpack正确缩进多行字符串。
output: {path: config.build.assetsRoot， filename:'[name].js'， publicPath: process.env.NODE_ENV ==='production'? config.build.assetsPublicPath : config.dev.assetsPublicPath， sourcePrefix:' '}
4.2、在build/webpack.base.conf.js下的module中加入unknownContextCritical: false，让Webpack打印载入特定库时候的警告。
4.3、在build/webpack.base.conf.js下的module中加入unknownContextRegExp: /^./.*$/，为了解决Error: Cannot find module "."该错误
module: {rules:[ ..... ]，unknownContextRegExp:/^.\/.*$/,unknownContextCritical:false}
5、编写Vue组件
5.1、在components目录下新建MainViewer.vue组件，内容如下：
importCesiumfrom'cesium/Source/Cesium.js'importbuildModuleUrlfrom"cesium/Source/Core/buildModuleUrl"import"cesium/Source/Widgets/widgets.css";importCesiumViewerfrom'./CesiumViewer.vue'exportdefault{name:'MainViewer',components:{CesiumViewer}, data () {return{viewer:''} },mounted:function(){//设置静态资源目录buildModuleUrl.setBaseUrl('../../static/Cesium/');//创建viewer实例this.viewer =newCesium.Viewer('cesiumContainer',{animation:false,baseLayerPicker:false,fullscreenButton:false,geocoder:false,homeButton:false,sceneModePicker:false,selectionIndicator:false,timeline:false,navigationHelpButton:false,infoBox:false,navigationInstructionsInitiallyVisible:false});this.viewer._cesiumWidget._creditContainer.style.display ="none";//去掉logo}}#mainDiv{width:100%;height:100%; }#cesiumContainer{width:100%;height:100%; }
5.2、在components目录下新建CesiumViewer.vue组件，内容如下：
exportdefault{name:'CesiumViewer',props:['viewer'], data () {return{ } },mounted:function(){console.log(this.viewer);console.log("在这里进行Cesium和viewer的操作！"); }}
5.3、修改路由文件index.js
importVuefrom'vue'importRouterfrom'vue-router'importMainViewerfrom'../components/MainViewer.vue'Vue.use(Router)exportdefaultnewRouter({routes: [ {path:'/',name:'MainViewer',component: MainViewer } ]})
6、启动项目：npm start
如果本文对您有帮助，可以小小的赞助一笔，这样使我更有动力写出更多更好的文章。
作者：WebGiser
链接：https://www.jianshu.com/p/f6e757f63d44
来源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。
网友评论