一个简略的 Vue Cli 4 引入 Cesium 的架子，能够间接拉取我的项目，本人扩大。欢送试用，能够 Star 哟！

原文地址：Vue Cli 4 引入 Cesium 配置

Github: https://github.com/martinageradams/vue-cesium-example

Vue 我的项目搭建，我就不展现了。依照官网间接一步一步进行就能够。也不展现 webpack 配置的坑了，依照上面的代码配置，我的项目就能用。

vue.config.js

const CopyWebpackPlugin = require("copy-webpack-plugin");const webpack = require("webpack");module.exports = {  configureWebpack: {    plugins: [      // Copy Cesium Assets, Widgets, and Workers to a static directory      new CopyWebpackPlugin({        patterns: [          { from: "node_modules/cesium/Build/Cesium/Workers", to: "Workers" },          {            from: "node_modules/cesium/Build/Cesium/ThirdParty",            to: "ThirdParty"          },          { from: "node_modules/cesium/Build/Cesium/Assets", to: "Assets" },          { from: "node_modules/cesium/Build/Cesium/Widgets", to: "Widgets" }        ]      }),      new webpack.DefinePlugin({        // Define relative base path in cesium for loading assets        CESIUM_BASE_URL: JSON.stringify("")      })    ],    module: {      // Removes these errors: "Critical dependency: require function is used in a way in which dependencies cannot be statically extracted"      // https://github.com/AnalyticalGraphicsInc/cesium-webpack-example/issues/6      unknownContextCritical: false,      unknownContextRegExp: /\/cesium\/cesium\/Source\/Core\/buildModuleUrl\.js/    }  }};

Map.vue

<template>  <div id="cesiumContainer"></div></template><script>import "cesium/Build/Cesium/Widgets/widgets.css";import * as Cesium from "cesium";export default {  name: "Map",  mounted() {    this.init();  },  methods: {    init() {      let viewer = new Cesium.Viewer("cesiumContainer");      let imageryLayers = viewer.imageryLayers;      let googleMap = new Cesium.UrlTemplateImageryProvider({        url: "http://www.google.com/maps/vt?lyrs=s@716&x={x}&y={y}&z={z}"      });      imageryLayers.addImageryProvider(googleMap);      // fly      viewer.camera.flyTo({        destination: Cesium.Cartesian3.fromDegrees(          114.296063,          30.55245,          20000000        ),        orientation: {          heading: Cesium.Math.toRadians(0),          pitch: Cesium.Math.toRadians(-90),          roll: 0.0        },        duration: 10 // fly time 10s      });    }  }};</script><style lang="scss" scoped>#cesiumContainer {  width: 100vw;  height: 100vh;  margin: 0;  padding: 0;  overflow: hidden;}</style>