Vue-Cli +Cesium环境搭建

1Vue-Cli安装

打开命令行，键入

# 安装 Vue-Cli
npm install -g @vue/cli
#查看Vue-Cli版本，如果是Vue Cli 2.9.6以下，则无法完成以下操作，卸载重装
vue --version
#卸载
npm uninstall -g vue-cli

示例：
在这里插入图片描述

2创建项目

#创建项目
vue create cesium_demo

创建成功后选择用vs打开
在这里插入图片描述
进行项目配置

#在终端输入
npm i
npm run serve
#如果提示cannot find module 'vue-loader-v16/package.json'
#升级npm  重新装
npm i -g npm
npm i -D vue-loader-v16
npm run serve
#OK

部分操作截图：
在这里插入图片描述

3 cesium进宫

#进宫
npm install -S cesium
npm i cesium --save

安装成功后的截图
在这里插入图片描述

如果这里有cesium的版本，即表示OK

4 配置路径

项目同级目录下创建一个文件 vue.config.js 内容如下
安装copy插件，修改默认的define插件，将Cesium的CESIUM_BASE_URL值改成自己的；使用copy插件做资源映射

const path =require('path');
const CopyPlugin = require ('copy-webpack-plugin');

function resolve(dir){
    return path.join(__dirname,dir)
}

module.exports={
    publicPath:process.env.NODE_ENV ==='production'?'/earth/':'./',
    assetsDir:'static',
    lintOnSave:false,
    filenameHashing:false,
    productionSourceMap:false,
    chainWebpack:(config) =>{
        config.plugin('define').tap(args =>{
            args[0].CESIUM_BASE_URL = JSON.stringify(process.env.NODE_ENV ==='production'?'/earth/static':'static')
            return args
        })
        config.resolve.alias
            .set('@',resolve('src'))
    },
    devServer:{
        overlay:{
            warnings:false,
            errors:false
        }
    },
    configureWebpack:{
        plugins:[ new CopyPlugin([
            {from:'node_modules/cesium/Build/Cesium/Assets',to:'static/Assets'},
            {from:'node_modules/cesium/Build/Cesium/Widgets',to:'static/Widgets'},
            {from:'node_modules/cesium/Build/Cesium/Workers',to:'static/Workers'},
            {from:'node_modules/cesium/Build/Cesium/ThirdParty',to:'static/ThirdParty'},
            {from:'src/assets',to:'assets'}
        ])]
    }
}

引入样式和Cesium

import * as Cesium from 'cesium';
import 'cesium/Source/Widgets/widgets.css'

5 球来

<template>
    <div id='app'>
        <div id='cesiumContainer'>
        </div>
    </div>
</template>

<script>
import * as Cesium from 'cesium';
import 'cesium/Source/Widgets/widgets.css'

export default {
  name: 'App',
  mounted(){
    new Cesium.Viewer('cesiumContainer',{
      geocoder:false,
      homeButton:false,
      sceneModePicker:false,
      navigationHelpButton:false,
      animation:false,
      creditsDisplay:false,
      timeline:false,
      fullscreenButton:false,
    });
    viewer.cesiumWidget.creditContainer.style.dispaly = 'none'
  },
};
</script>

<style>
#cesiumContainer{
  width: 100%;
  height: 100%;
}
</style>