vue4+Cesium1.81.0安装及配置

vue4+Cesium1.81.0

一、基本环境安装

1. node.js
2. webpack安装
3. vue -cli 安装

如果不是vue3以上的先卸载再安装，我当时卸载2.9.6版本的时候就是卸载了好多遍，然后还需要用管理员身份打开命令窗口安装vue4。

npm uninstall vue-cli -g  卸载

npm install -g @vue/cli  安装

我的版本：

二、Cesium环境配置

1.安装Cesium

npm install cesium --save

2.在build/webpack.base.conf.js下

①定义cesium源码路径

const cesiumSource = '../node_modules/cesium/Source'

②在module.exports中，output添加sourcePrefix:' '，让webpack正确处理多行字符串

   

    

     

      

     
     

      

       output: {
      
     
    

     

      

     
     

      
    
       path: 
       config.build.assetsRoot,
      
     
    

     

      

     
     

      

           filename: 
       '[name].js',
      
     
    

     

      

     
     

      

           publicPath: process.env.NODE_ENV === 
       'production'
      
     
    

     

      

     
     

      

             ? 
       config.build.assetsPublicPath
      
     
    

     

      

     
     

      

             : 
       config.dev.assetsPublicPath,
      
     
    

     

      

     
     

      

           sourcePrefix: 
       ' '
      
     
    

     

      

     
     

      

         },
      
     
   

③在output后面，添加amd模式支持

   

    

     

      

     
     

      

       output: {
       ...}
       ，
      
     
    

     

      

     
     

      

       amd: {
      
     
    

     

      

     
     

      
  
       toUrlUndefined: 
       true
      
     
    

     

      

     
     

      

       }
       ,
      
     
   

④在resolve中设置cesium别名，引入的时候直接根据别名就可以找到cesium包了

   

    

     

      

     
     

      
 
       resolve: {
      
     
    

     

      

     
     

      
    
       extensions: [
       '.js', 
       '.vue', 
       '.json'],
      
     
    

     

      

     
     

      

           alias: {
      
     
    

     

      

     
     

      
      
       'vue$': 
       'vue/dist/vue.esm.js',
      
     
    

     

      

     
     

      
      
       '@': 
       resolve(
       'src'),
      
     
    

     

      

     
     

      
      
       'cesium': path.
       resolve(__dirname, cesiumSource)
      
     
    

     

      

     
     

      

           }
      
     
    

     

      

     
     

      

         },
      
     
   

⑤module里添加unknownContextCritical:false，让webpack打印载入特定库时候告警

   

    

     

      

     
     

      

       module: {
      
     
    

     

      

     
     

      
   
       rules: [...],
      
     
    

     

      

     
     

      
   
       unknownContextCritical: 
       false,
      
     
    

     

      

     
     

      
   
       // 
       unknownContextRegExp: /^.\/.*$/,   
       //这个很多都推荐了，但是实测的时候发现会报错，先不用
      
     
    

     

      

     
     

      

       },
      
     
   

3.配置webpack.dev.conf.js

①配置路径

   

    

     

      

     
     

      

       const cesiumSource = 
       'node_modules/cesium/Source'
      
     
    

     

      

     
     

      

       const cesiumWorkers = 
       '../Build/Cesium/Workers'
      
     
   

②在plugins下面添加如下插件

   

    

     

      

     
     

      

       plugins: [
      
     
    

     

      

     
     

      

          ...,
      
     
    

     

      

     
     

      
    
       // Copy Cesium Assets, Widgets, and Workers to a static directory
      
     
    

     

      

     
     

      
    
       new CopyWebpackPlugin([{ 
       from: path.join(cesiumSource, cesiumWorkers), 
       to: 
       'Workers' }]),
      
     
    

     

      

     
     

      
    
       new CopyWebpackPlugin([{ 
       from: path.join(cesiumSource, 
       'Assets'), 
       to: 
       'Assets' }]),
      
     
    

     

      

     
     

      
    
       new CopyWebpackPlugin([{ 
       from: path.join(cesiumSource, 
       'Widgets'), 
       to: 
       'Widgets' }]),
      
     
    

     

      

     
     

      
    
       new CopyWebpackPlugin([{ 
       from: path.join(cesiumSource, 
       'ThirdParty/Workers'), 
       to: 
       'ThirdParty/Workers' }]),
      
     
    

     

      

     
     

      
    
       new webpack.DefinePlugin({
      
     
    

     

      

     
     

      
       
       // Define relative base path in cesium for loading assets
      
     
    

     

      

     
     

      
       
       CESIUM_BASE_URL: JSON.stringify(
       '')
      
     
    

     

      

     
     

      

           })
      
     
    

     

      

     
     

      

         ]
      
     
   

4.配置webpack.prod.conf.js文件

①配置路径

   

    

     

      

     
     

      

       const cesiumSource = 
       'node_modules/cesium/Source'
      
     
    

     

      

     
     

      

       const cesiumWorkers = 
       '../Build/Cesium/Workers'
      
     
   

②在plugins下面添加如下插件，拷贝静态资源。与dev配置略有不同

   

    

     

      

     
     

      

       plugins: [
      
     
    

     

      

     
     

      

          ...,
      
     
    

     

      

     
     

      
    
       // Copy Cesium Assets, Widgets, and Workers to a static directory
      
     
    

     

      

     
     

      
    
       new CopyWebpackPlugin([{ 
       from: path.join(cesiumSource, cesiumWorkers), 
       to: 
       'Workers' }]),
      
     
    

     

      

     
     

      
    
       new CopyWebpackPlugin([{ 
       from: path.join(cesiumSource, 
       'Assets'), 
       to: 
       'Assets' }]),
      
     
    

     

      

     
     

      
    
       new CopyWebpackPlugin([{ 
       from: path.join(cesiumSource, 
       'Widgets'), 
       to: 
       'Widgets' }]),
      
     
    

     

      

     
     

      
    
       new CopyWebpackPlugin([{ 
       from: path.join(cesiumSource, 
       'ThirdParty/Workers'), 
       to: 
       'ThirdParty/Workers' }]),
      
     
    

     

      

     
     

      
    
       new webpack.DefinePlugin({
      
     
    

     

      

     
     

      
       
       // 定义Cesium从哪里加载资源，如果使用默认的''，却变成了绝对路径了，所以这里使用'./'，使用相对路径
      
     
    

     

      

     
     

      
       
       CESIUM_BASE_URL: JSON.stringify(
       './')
      
     
    

     

      

     
     

      

           })
      
     
    

     

      

     
     

      

         ]
      
     
   

5.修改config里index.js文件，build中的assetsPublicPath:"./"

   

    

     

      

     
     

      

       assetsSubDirectory: 
       'static',
      
     
    

     

      

     
     

      

       assetsPublicPath: 
       '',
      
     
   

三、引用和启动

在main.js引用cesium

新建一个vue文件测试是否引用cesium成功

   

    

     

      

     
     

      

       <template>
      
     
    

     

      

     
     

      
  
       <div class="map">
      
     
    

     

      

     
     

      
     
       <div id="cesiumContainer">
       </div>
      
     
    

     

      

     
     

      
  
       </div>
      
     
    

     

      

     
     

      

       </template>
      
     
    

     

      

     
     

      
 
      
     
    

     

      

     
     

      

       <script>
       
      
     
    

     

      

     
     

      
  
       let Cesium = 
       require(
       'cesium/Cesium')    
       //cesium1.6版本以后导入的方
      
     
    

     

      

     
     

      
  
       //import CesiumViewer from './CesiumExample/No01-init.vue'
      
     
    

     

      

     
     

      
 
      
     
    

     

      

     
     

      

       import 
       'cesium/Widgets/widgets.css'
      
     
    

     

      

     
     

      
  
       export  
       default{
      
     
    

     

      

     
     

      
    
       name:
       "home",
      
     
    

     

      

     
     

      

          data () {
      
     
    

     

      

     
     

      
       
       return {
      
     
    

     

      

     
     

      

              }
      
     
    

     

      

     
     

      

            },
      
     
    

     

      

     
     

      

           mounted(){
      
     
    

     

      

     
     

      
        
       //Cesium.Ion.defaultAccessToken = config.serverWeb.AccessToken;//秘钥
      
     
    

     

      

     
     

      
        
       const viewer = 
       new Cesium.Viewer(
       'cesiumContainer')
      
     
    

     

      

     
     

      

             },
      
     
    

     

      

     
     

      

         }
      
     
    

     

      

     
     

      

       </script>
      
     
    

     

      

     
     

      
 
      
     
    

     

      

     
     

      

       <style scoped>
       
      
     
    

     

      

     
     

      
  
       .map{
      
     
    

     

      

     
     

      
    
       width: 
       100%;
      
     
    

     

      

     
     

      
    
       height: 
       100%;
      
     
    

     

      

     
     

      

         }
      
     
    

     

      

     
     

      

       </style>
      
     
   

 

效果：

参考：https://www.jianshu.com/p/ff26886f7255