Version:

vue v2.5.2

cesium v1.68.0

Development tools use vscode

The installation steps of node, vue-cli, etc. are badly mentioned on the Internet, so I won’t talk about them here.

Download the webpack template project and install cesium dependencies

Create a test folder in your favorite location. Here I use cesiumDemo, drag it into vscode, right click and "open in terminal".

Type in terminal

You can download the vue project suitable for novice development

test is the project name can be customized

After the download is complete, continue to enter the terminal

cd test

Officially enter the project, continue to enter

npm install cesium --save

Download cesium dependencies.

integrated cesium

According to online articles, it is roughly as follows:

Configure the webpack.base.conf.js file

// 定义Cesium源码路径
const cesiumSource = '../node_modules/cesium/Source'

If the runtime reports "Cannot find module ".", you can consider releasing unknownContextRegExp.

Configure the webpack.dev.conf.js file

// 定义Cesium源码路径
const cesiumSource = 'node_modules/cesium/Source'
const cesiumWorkers = '../Build/Cesium/Workers'

Here cesium is looking for the Source folder in the dependency package (the js entry under it), and the corresponding cesiumWorkers is based on the cesiumSource to refer to the specific class file in the Workers directory. Students who do not understand the relative path can review it again .

Add the following plugins under plugins to copy static resources

Configure the webpack.prod.conf.js file

// 定义Cesium源码路径
const cesiumSource = 'node_modules/cesium/Source'
const cesiumWorkers = '../Build/Cesium/Workers'

Also add plugins in plugins

It should be noted that CESIUM_BASE_URL needs to use a relative path here, so use stringify('./'), otherwise it will be spliced into an absolute path.

Create a cesium component and reference it

Create the cesiumView component.

<template>
 <div id="cesiumContainer">

 </div>
</template>

<script>
import '../../node_modules/cesium/Build/Cesium/Widgets/widgets.css'
export default {
  name: 'cesiumView',
  mounted () {
    var view = new this.Cesium.Viewer('cesiumContainer')
  }
}
</script>

<style scoped>

</style>

Modify App.vue

<template>
  <div id="app">
    <!-- <img src="./assets/logo.png"> -->
    <cesiumView/>
  </div>
</template>

<script>
import cesiumView from './components/cesiumView'
export default {
  name: 'App',
  components: {
    'cesiumView': cesiumView
  }
}
</script>

<style>
/* //保证浏览器全屏幕显示，没有多余的白边 */
html， body， #cesiumContainer {
 width: 100%;
 height: 100%;
 margin: 0;
 padding: 0;
 overflow: hidden;
}
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  /* margin-top: 60px; */
}
</style>

Modify router/index.js

import Vue from 'vue'
import Router from 'vue-router'
// import HelloWorld from '@/components/HelloWorld'
import cesiumView from '@/components/cesiumView'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'cesiumView',
      component: cesiumView
    }
  ]
})

Modify main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
// import '../node_modules/cesium/Build/Cesium/Widgets/widgets.css'
// import Cesium from 'cesium/Cesium'
var Cesium = require('cesium/Cesium')
// import 'cesium/Cesium/Widgets/widgets.css'
Vue.config.productionTip = false

Vue.prototype.Cesium = Cesium
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

It should be noted that other articles on the Internet said import Cesium from 'cesium/Cesium', but I tried it and found that the prompt was abnormal

This is because I downloaded the cesium1.68 version, the new version does not support the overall import, you can use the require method.

And I read online that

I haven't packaged it well to verify the authenticity. I also said to modify the assetsPublicPath of the dev configuration item and change it to '', but I found that it can run without changing it.

Reference article:

https://blog.csdn.net/u011347088/article/details/83090527

https://blog.csdn.net/weizhixiang/article/details/104473856

https://www.jianshu.com/p/248a904dbb34

https://blog.csdn.net/li11122212/article/details/93167685

vue + cesium environment construction