---
title: 使用npm方式(vue-cli)
author: ac
date: 2022-01-14
tags:
 - CesiumJS
categories:
 - GIS
---

> 在vue项目中使用npm的方式安装cesium

### 1. 创建vue项目

```javascript
//安装vue-cli脚手架
npm install -g @vue/cli

//创建learning-cesium项目
vue create learning-cesium
```

### 2. 安装Cesium

```javascript
npm i cesium
```

### 3. 配置Cesium

先将下列资源拷贝一份到 `public` 文件下。

- `node_modules/cesium/Build/Cesium/Workers`
- `node_modules/cesium/Build/Cesium/ThirdParty`
- `node_modules/cesium/Build/Cesium/Assets`
- `node_modules/cesium/Build/Cesium/Widgets`

这里为了方便管理，新建了一个名为`cesiumjs`的文件夹，用于存放上面的资源：

![image-20220729153732517](./images/image-20220729153732517.png)

在入口文件 `main.js` 中配置cesium的静态资源路径：

```javascript
import Vue from 'vue'
import App from './App.vue'
import 'cesium/Build/Cesium/Widgets/widgets.css'

Vue.config.productionTip = false
window.CESIUM_BASE_URL = '/cesiumjs'

new Vue({
  render: h => h(App)
}).$mount('#app')
```



在 `components`文件夹下创建 `CesiumView.vue`组件：

```javascript
<template>
  <div id="cesiumContainer"></div>
</template>

<script>
import * as Cesium from 'cesium'
export default {
  methods: {
    initCesium () {
      Cesium.Ion.defaultAccessToken = 'your_access_token'

      // Initialize the Cesium Viewer in the HTML element with the "cesiumContainer" ID.
      const viewer = new Cesium.Viewer('cesiumContainer', {
        terrainProvider: Cesium.createWorldTerrain()
      })

      // Fly the camera to San Francisco at the given longitude, latitude, and height.
      viewer.camera.flyTo({
        destination: Cesium.Cartesian3.fromDegrees(-122.4175, 37.655, 400),
        orientation: {
          heading: Cesium.Math.toRadians(0.0),
          pitch: Cesium.Math.toRadians(-15.0)
        }
      })
    }
  },
  mounted () {
    this.initCesium()
  }
}
</script>
<style scoped></style>
```

在App.vue组件中将helloWorld.vue组件去掉，换成 `CesiumView.vue` 组件。

```javascript
<template>
  <div id="app">
    <!-- <img alt="Vue logo" src="./assets/logo.png"> -->
    <!-- <HelloWorld msg="Welcome to Your Vue.js App"/> -->
    <CesiumView></CesiumView>
  </div>
</template>

<script>
// import HelloWorld from './components/HelloWorld.vue'
import CesiumView from '@/components/CesiumView.vue'
export default {
  name: 'App',
  components: {
    // HelloWorld,
    CesiumView
  }
}
</script>
```

### 4.遇到的问题

- Ceisum的样式文件引入失败。`Module not found: Error: Package path ./Build/Cesium/Widgets/widgets.css is not exported from package`

  解决方法：

  1、选择直接在项目的index.html中采用`link`标签引入

  ```html
  <link rel="stylesheet" href="<%= BASE_URL %>cesiumjs/Widgets/widgets.css"/>
  ```