✨Vue Cli 4 引入Cesium 配置🎉

在现代前端开发中，Vue Cli 4 和 Cesium 的结合可以为地图应用开发提供强大的支持。今天，我们就来聊聊如何在 Vue Cli 4 中配置 Cesium 1.108.0，开启你的三维地球探索之旅🌍。

首先，确保你已经安装了 Vue Cli 4，并创建了一个新的项目vue create my-project。进入项目目录后，我们需要通过npm或yarn安装Cesium。推荐使用npm install cesium@1.108.0来锁定特定版本，避免兼容性问题。

接下来是关键步骤：配置Webpack以正确加载Cesium资源。在`vue.config.js`文件中添加如下代码：

```javascript

const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {

configureWebpack: {

plugins: [

new CopyWebpackPlugin([

{ 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' }

])

],

resolve: {

alias: {

'@cesium': path.resolve(__dirname, './node_modules/cesium/Source')

}

}

}

};

```

这样配置后，就可以愉快地在项目中引入Cesium啦！记得在组件中使用`import as Cesium from 'cesium';`，并指定Cesium的路径，例如`Cesium.Ion.defaultAccessToken = 'your-access-token';`。

最后，启动开发服务器npm run serve，检查浏览器中的效果吧！🚀

VueCli Cesium WebGL 三维地图