0. 前言

本文档使用的vue cli工具版本为4.5.9

image.png

1. 创建vue基本项目

1.1 安装vue cli

  1. npm install -g @vue/cli
  2. # OR
  3. yarn global add @vue/cli

1.2 创建vue项目(以default配置为例)

  1. vue create cesium-demo

项目创建完成后，得到的目录结构如下：
image.png
手动添加vue.config.js

2. 安装和配置cesium

2.1 安装cesium依赖

  1. npm install cesium 
  2. #  OR
  3. yarn add cesium

2.2 安装配置所需工具copy-webpack-plugin

  1. npm install copy-webpack-plugin -D
  2. #  OR
  3. yarn add copy-webpack-plugin -D

3. 配置vue.config.js

配置文件如下，vue.config.js中，configureWebpack内的内容为一个对象时，内容会被webpack-merge合并到最终配置中，所以将cesium的文件配置挪一部分过来即可

  1. // The path to the CesiumJS source code
  2. const cesiumSource = 'node_modules/cesium/Source';
  3. const cesiumWorkers = '../Build/Cesium/Workers';
  4. const path = require('path');
  5. const webpack = require("webpack");
  6. const CopyPlugin = require("copy-webpack-plugin");
  8. module.exports = {
  9.     configureWebpack: {
  10.         output: {
  11.             sourcePrefix: ' ',
  12.         },
  13.         amd: {
  14.             toUrlUndefined: true,
  15.         },
  16.         plugins: [
  17.             // Copy Cesium Assets, Widgets, and Workers to a static directory
  18.             new CopyPlugin({ patterns: [{ from: path.join(cesiumSource, cesiumWorkers), to: 'Workers' }] }),
  19.             new CopyPlugin({ patterns: [{ from: path.join(cesiumSource, 'Assets'), to: 'Assets' }] }),
  20.             new CopyPlugin({ patterns: [{ from: path.join(cesiumSource, 'Widgets'), to: 'Widgets' }] }),
  21.             new webpack.DefinePlugin({
  22.                 // Define relative base path in cesium for loading assets
  23.                 CESIUM_BASE_URL: JSON.stringify("")
  24.             }),
  25.         ],
  26.         module: {
  27.             // Removes these errors: "Critical dependency: require function is used in a way in which dependencies cannot be statically extracted"
  28.             // https://github.com/AnalyticalGraphicsInc/cesium-webpack-example/issues/6
  29.             unknownContextCritical: false,
  30.             unknownContextRegExp: /\/cesium\/cesium\/Source\/Core\/buildModuleUrl\.js/
  31.         }
  32.     }
  33. };

4. 创建cesium实例

  1. // App.vue
  2. <template>
  3.   <div id="cesiumContainer"></div>
  4. </template>
  6. <script>
  7. import "cesium/Build/Cesium/Widgets/widgets.css";
  8. import * as Cesium from "cesium";
  9. export default {
  10.   name: 'App',
  11.   mounted() {
  12.     new Cesium.Viewer("cesiumContainer");
  13.   }
  14. }
  15. </script>

效果展示如下：
image.png

5. 注意事项

copy-webpack-plugin的版本不能是现在最新的7.0.0（该版本支持webpack5），如果使用该版本的插件，会出现编译错误。

image.png