vue4+Cesium1.81.0

一、基本环境安装

node.js
webpack安装
vue -cli 安装

如果不是vue3以上的先卸载再安装，我当时卸载2.9.6版本的时候就是卸载了好多遍，然后还需要用管理员身份打开命令窗口安装vue4。

npm uninstall vue-cli -g 卸载

npm install -g @vue/cli 安装

我的版本：

二、Cesium环境配置

1.安装Cesium

npm install cesium --save

2.在build/webpack.base.conf.js下

①定义cesium源码路径

const cesiumSource = '../node_modules/cesium/Source'

②在module.exports中，output添加sourcePrefix:' '，让webpack正确处理多行字符串

output: {path: config.build.assetsRoot,filename: '[name].js',publicPath: process.env.NODE_ENV === 'production'? config.build.assetsPublicPath: config.dev.assetsPublicPath,sourcePrefix: ' '},

③在output后面，添加amd模式支持

output: {...}，
amd: {toUrlUndefined: true
},

④在resolve中设置cesium别名，引入的时候直接根据别名就可以找到cesium包了

 resolve: {extensions: ['.js', '.vue', '.json'],alias: {'vue$': 'vue/dist/vue.esm.js','@': resolve('src'),'cesium': path.resolve(__dirname, cesiumSource)}},

⑤module里添加unknownContextCritical:false，让webpack打印载入特定库时候告警

module: {rules: [...],unknownContextCritical: false,// unknownContextRegExp: /^.\/.*$/,   //这个很多都推荐了，但是实测的时候发现会报错，先不用
},

3.配置webpack.dev.conf.js

①配置路径

const cesiumSource = 'node_modules/cesium/Source'
const cesiumWorkers = '../Build/Cesium/Workers'

②在plugins下面添加如下插件

plugins: [...,// Copy Cesium Assets, Widgets, and Workers to a static directorynew CopyWebpackPlugin([{ from: path.join(cesiumSource, cesiumWorkers), to: 'Workers' }]),new CopyWebpackPlugin([{ from: path.join(cesiumSource, 'Assets'), to: 'Assets' }]),new CopyWebpackPlugin([{ from: path.join(cesiumSource, 'Widgets'), to: 'Widgets' }]),new CopyWebpackPlugin([{ from: path.join(cesiumSource, 'ThirdParty/Workers'), to: 'ThirdParty/Workers' }]),new webpack.DefinePlugin({// Define relative base path in cesium for loading assetsCESIUM_BASE_URL: JSON.stringify('')})]

4.配置webpack.prod.conf.js文件

①配置路径

const cesiumSource = 'node_modules/cesium/Source'
const cesiumWorkers = '../Build/Cesium/Workers'

②在plugins下面添加如下插件，拷贝静态资源。与dev配置略有不同

plugins: [...,// Copy Cesium Assets, Widgets, and Workers to a static directorynew CopyWebpackPlugin([{ from: path.join(cesiumSource, cesiumWorkers), to: 'Workers' }]),new CopyWebpackPlugin([{ from: path.join(cesiumSource, 'Assets'), to: 'Assets' }]),new CopyWebpackPlugin([{ from: path.join(cesiumSource, 'Widgets'), to: 'Widgets' }]),new CopyWebpackPlugin([{ from: path.join(cesiumSource, 'ThirdParty/Workers'), to: 'ThirdParty/Workers' }]),new webpack.DefinePlugin({// 定义Cesium从哪里加载资源，如果使用默认的''，却变成了绝对路径了，所以这里使用'./'，使用相对路径CESIUM_BASE_URL: JSON.stringify('./')})]

5.修改config里index.js文件，build中的assetsPublicPath:"./"

assetsSubDirectory: 'static',
assetsPublicPath: '',

三、引用和启动

在main.js引用cesium

新建一个vue文件测试是否引用cesium成功

<template><div class="map"><div id="cesiumContainer"></div></div>
</template><script>let Cesium = require('cesium/Cesium')    //cesium1.6版本以后导入的方//import CesiumViewer from './CesiumExample/No01-init.vue'import 'cesium/Widgets/widgets.css'export  default{name:"home",data () {return {}},mounted(){//Cesium.Ion.defaultAccessToken = config.serverWeb.AccessToken;//秘钥const viewer = new Cesium.Viewer('cesiumContainer')},}
</script><style scoped>.map{width: 100%;height: 100%;}
</style>

效果：

参考：https://www.jianshu.com/p/ff26886f7255

vue4+Cesium1.81.0安装及配置相关推荐

hadoop 2.5.0安装和配置
安装hadoop要先做以下准备: 1.jdk,安装教程在 http://www.cnblogs.com/stardjyeah/p/4640917.html 2.ssh无密码验证,配置教程在 http: ...
Maven3.5.0安装与配置
Maven3.5.0安装与配置下载Maven3.5.0 Maven3.5.0下载地址 Maven3.5.0的安装将下载后的apache-maven-3.5.0-bin.zip解压,如"g ...
tomcat9.0安装与配置
tomcat9.0安装与配置准备工作通常情况下,是先下载JDK.JRE之后再下载tomcat的,所以在安装配置tomcat之前,需要检查一下你的jdk.jre环境变量是否配置完成. ·控制面板-& ...
国产达梦数据库学习笔记（一）：NeoKylin7.0安装及配置与常用基础命令
国产达梦数据库学习笔记(一):NeoKylin7.0安装及配置与常用基础命令以VMware Workstation Pro 15环境下的NeoKylin7.0与DM8为例中标麒麟系统NeoKyli ...
Spark2.1.0安装与配置（单机版）
Spark2.1.0安装与配置(单机版) B站同步视频:Spark2.1.0安装与配置(单机版) 前言该安装教程是承接Spark源码编译B站教程所制,因此所使用的安装包是在Spark源码编译教程中得 ...
查询linux kafka安装目录,Kafka 1.0.0安装和配置--Linux篇
阅读目录: 1. 关闭防火墙和Selinux 2. 安装所需环境JDK,Zookeeper 3. 下载Kafka 1.0.0版本 4. 配置Kafka 5. 启动Kafka并验证 6. 报错及解决 7 ...
UE5 C++ Rider 编程指南 0.安装和配置
目录 0. 前言 1. Rider特性 1.1 快速跨平台C++支持 1.2 连接代码和UE编辑器 1.3 协助反射机制和RPC 1.4 代码分析和命名风格 1.5 调试器 1.6 单元测试 2. 安 ...
VMware NSX 4.0安装、配置和升级实战
本文通过一个Vmware NSX 4的安装配置实例,扼要说明了一个典型的NSX系统配置.升级过程需要注意的正确步骤,并列出了作者在学习过程中踩过的坑,为同行绕过提供借鉴. 1.系统软硬件环境说明本安 ...
mysql8.0安装及配置超详细教程_系统城教你mysql8.0安装与配置教程
一.下载mysql 安装mysql有两种方式,一种是下载安装包安装,另一种是下载压缩包解压配置,这里使用安装包方式. 进去后点击下面的Download 点击No thinks进入下载二.安装mysq ...

vue4+Cesium1.81.0安装及配置