安装部署Vue开发环境

因为vue-cli依赖webpack,所以首先安装webpack这个工具: $ npm install -g webpack
然后安装vue-cli: npm install -g @vue/cli或者yarn global add @vue/cli[新版 3.*]

$ npm install -g vue-cli[旧版 2.*]

使用方法如下:

$ vue init webpack vue-cesium
$ cd vue-cesium
$ npm install
$ npm run dev

安装cesium依赖

cnpm install cesium --save

webpack环境配置

配置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: ' '// 新增
  },

添加amd支持

amd:{
  toUrlUndefined:true,  //添加这个设置
},

在resolve.alias中添加cesium: path.resolve(__dirname, cesiumSource)

 resolve: {
  extensions: ['.js', '.vue', '.json'],
  alias: {
    'vue$': 'vue/dist/vue.esm.js',
    '@': resolve('src'),
    cesium: path.resolve(__dirname, cesiumSource)//新增
  }
},

在module下面增加

	module: {
    rules: [...],
    // unknownContextRegExp: /^.\/.*$/, // 可能报错，反正我注释了
    // 不让webpack打印载入特定库时的警告
    // 这里必须设置，否则报错，导致webpack打包不过去：
    // Critical dependency: require function is used in a way in which dependencies cannot be statically extracted45
    unknownContextCritical:false 
  },

配置build/webpack.dev.conf.js

plugins中加入插件，拷贝静态资源

// 也可以先定义cesium源码路径，定义cesium workers路径为变量
// const cesiumSource = 'node_modules/cesium/Source'
// const cesiumWorkers = '../Build/Cesium/Workers'，我就省略了
// Copy Cesium Assets, Widgets, and Workers to a static directory
  new CopyWebpackPlugin([ { from: path.join('node_modules/cesium/Source', '../Build/Cesium/Workers'), to: 'Workers' } ]),
  	new CopyWebpackPlugin([ { from: path.join('node_modules/cesium/Source', 'Assets'), to: 'Assets' } ]),
  new CopyWebpackPlugin([ { from: path.join('node_modules/cesium/Source', 'Widgets'), to: 'Widgets' } ]),
  new CopyWebpackPlugin([ { from: path.join('node_modules/cesium/Source', 'ThirdParty/Workers'), to: 'ThirdParty/Workers' }]),
  	new webpack.DefinePlugin({
    // Define relative base path in cesium for loading assets
    CESIUM_BASE_URL: JSON.stringify('')
  })

配置webpack.prod.conf.js，基本与dev文件相同，只是CESIUM_BASE_URL需采用相对路径./的形式。

plugins中添加

// Copy Cesium Assets, Widgets, and Workers to a static directory
  new CopyWebpackPlugin([ { from: path.join('node_modules/cesium/Source', '../Build/Cesium/Workers'), to: 'Workers' } ]),
  	new CopyWebpackPlugin([ { from: path.join('node_modules/cesium/Source', 'Assets'), to: 'Assets' } ]),
  new CopyWebpackPlugin([ { from: path.join('node_modules/cesium/Source', 'Widgets'), to: 'Widgets' } ]),
  new CopyWebpackPlugin([ { from: path.join('node_modules/cesium/Source', 'ThirdParty/Workers'), to: 'ThirdParty/Workers' }]),
  	new webpack.DefinePlugin({
    // Define relative base path in cesium for loading assets,注意这里与上面不同
    CESIUM_BASE_URL: JSON.stringify('./')
  })

配置config/index.js文件配置config文件夹下的index.js文件，这个文件有dev、build两个配置项目，在dev和build配置项下，配置assetsPublicPath为'/'。如果像网上有些文章说的，把assetsPublicPath改为''，我试了，会报错：cannot get / ，打开F12会看到failed to load resource:

build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),
 
    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',  //修改这个地方
}

至此，webpack配置完毕接下来在组件中引用

使用方法

由于cesium-1.63 版本之前是用的AMD的方式进行编译的，而在1.63版时使用ES6进行了重构。新版本不支持整体import，可以按需引入。我在这里直接修改原有的HelloWorld组件，就不需要再修改router了。

<template>
  // 添加一个div容器
  <div id="cesiumContainer"></div>
</template>
<script>
//注意from后的文件目录，cesium1.6版本以后导入的方式，cesium是node_modules/cesium/Source的别名
import * as Cesium from 'cesium/Cesium'
//也可以这样引用
let Cesium = require('cesium/Cesium')    
import 'cesium/Widgets/widgets.css'

export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  mounted () {
    this.$nextTick(() => {
      //正常运行后，在界面底部会有一个 access token 的提示，去官网上申请一个  access token ，在 new Cesium.Viewer 前添加 一行代码：
      Cesium.Ion.defaultAccessToken = '自己申请token'; 
      // 这句代码执行后，就能看到地球了
      const viewer = new Cesium.Viewer('cesiumContainer')
      console.log('viewer: ', viewer)
    })
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
// 注意这里加上样式，否则无法展示
#cesiumContainer {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
</style>

参考文献

blog.csdn.net/happy81997/… blog.csdn.net/qq_29384639… my.oschina.net/berzhuan/bl…

vue-cesium环境搭建

安装部署Vue开发环境

安装cesium依赖

webpack环境配置

使用方法

参考文献