.container{width:100%;高度：100vh；}#cesiumContainer{宽度：100%；height:100vh;}前言今天学习了Vue+Cesium的相关配置，使用的是Cesium1.69。在网上找了很多参考文章，比如：https://www.jianshu.com/p/ff26886f7255，但是配置之后，importCesiumfrom'cesium/Cesium'导入模块时总是报错：》export'default'(importedas'Cesium')wasnotfoundin'cesium/Cesium'查找原因，发现Cesium1.63版本在1.63版本之前是按照AMD的方式编译的，但是在1.63版本之前使用ES6进行了重构version1.63:所以1.63之后的版本，在导入模块的时候应该使用下面的方法：import*asCesiumfrom'cesium/Source/Cesium.js'//or:import{Viewer}from'cesium/Source/Cesium.js'这样就不会报错了。如果你遇到了同样的问题，恭喜你，你可以跳过接下来的配置步骤。Step1.创建vue项目使用vue-cli工具创建vue项目：vueinitwebpackcesium_demoinstallcesium:cdcesium_demonpminstallcesium--save2。Cesium环境配置需要修改webpack.base.conf.js、webpack.dev.conf.js、webpack.prod.conf.js三个文件2.1配置webpack.base.conf.js定义Cesium源码路径：constcesiumSource='../node_modules/cesium/Source'让webpack正确处理输出中的多行字符串AddsourcePrefix:''output:{path:config.build.assetsRoot,filename:'[name].js',publicPath:process.env.NODE_ENV==='生产'?config.build.assetsPublicPath:config.dev.assetsPublicPath,sourcePrefix:''}，设置cesium别名，需要在resolve中设置cesium别名，这样导入时就可以根据别名找到Cesium包。（注：也可以不设置别名，导入包直接导入'cesium/Source/Cesium.js'。其实设置别名的目的就是让“别名”指向/node_modules/cesium/Source目录)resolve:{extensions:['.js','.vue','.json'],alias:{'vue$':'vue/dist/vue.esm.js','@':resolve('src'),cesium:path.resolve(__dirname,cesiumSource)}}，防止添加unknownContextCritical的依赖警告：错误模块：{规则：[...],unknownContextCritical:false,}2.2配置webpack.dev.conf.js定义路径：constcesiumSource='node_modules/cesium/Source'constcesiumWorkers='../Build/Cesium/Workers'在plugins下添加如下插件:newCopyWebpackPlugin([{from:path.join(cesiumSource,cesiumWorkers),to:'Workers'}]),newCopyWebpackPlugin([{from:path.join(cesiumSource,'Assets'),to:'Assets'}]),newCopyWebpackPlugin([{from:path.join(cesiumSource,'Widgets'),to:'Widgets'}]),newCopyWebpackPlugin([{from:path.join(cesiumSource,'ThirdParty/Workers'),to:'ThirdParty/Workers'}]),newwebpack.DefinePlugin({//在cesium中定义加载资源的相对基路径CESIUM_BASE_URL:JSON.stringify('')})2.3配置webpack.prod.conf.js文件定义路径：constcesiumSource='node_modules/cesium/Source'constcesiumWorkers='../Build/Cesium/Workers'在plugins下添加如下内容插件：newCopyWebpackPlugin([{from:path.join(cesiumSource,cesiumWorkers),to:'Workers'}]),newCopyWebpackPlugin([{from:path.join(cesiumSource,'Assets'),to:'Assets'}]),newCopyWebpackPlugin([{from:path.join(cesiumSource,'Widgets'),to:'Widgets'}]),newCopyWebpackPlugin([{from:path.join(cesiumSource,'ThirdParty/Workers'),to:'ThirdParty/Workers'}]),newwebpack.DefinePlugin({//注意这里的配置和dev的不一样//定义Cesium从哪里加载资源，如果使用默认的''，就变成了绝对路径，所以这里用'./'，用相对路径导入模块，因为Cesium版本1.63和l使用ES6合适的使用方法：
