Vue2 configuration cesium detailed tutorial

1 Introduction

There are many tutorials on vue configuration cesium on the Internet, including csdn and nuggets. Although these tutorials provide developers how to configure cesium in a certain sense, most of the methods are impractical, because the versions of npm, node, cesium, vue, and webpack in everyone's computer are basically inconsistent. Just copying and copying will cause a series of errors and bugs.

I have tried a lot of tutorials on the Internet for most of the developers, and the easiest and most convenient way is to use the npm i cesium package and put the Cesium files in this folder in the public folder, which can get twice the result with half the effort and succeed Quickly run files. The specific operation is as follows:

2. Process

2.1 Create a vue2 project

I use vue-cli create to create a vue2 project here, and I can do whatever I want without caring too much about the version.

vue create XXXX

2.2 Use npm to download cesium third-party library

npm i cesium

2.3 Place the cesium file under node_modules under public

2.4 Add the imported cesium js file and css file to the vue file

After the installation is complete, introduce it into the project. Here, I did not configure vue.config.js as said on the Internet, but directly introduced cesium:

import * as Cesium from 'cesium'

When using cesium, you need to apply for a key on the official website, and write it in main.js

window.CESIUM_BASE_URL = '/cesium'

After opening the website, the work is complete. At the same time, I packaged it and tested it. At this time, I found another problem and reported an error: Cannot read property 'length' of undefined; this is @open-wc/webpack-import-meta-loader The version problem can be solved by downgrading or modifying:

At this time, ok, import the css and js files in the vue file to realize the display: