vue+cesiumjs的环境搭建【script引入】
【可以看我的博客里另外一篇----- import引入 ,可以不用script引入】
地址:https://www.cnblogs.com/reround/p/12020661.html
最近做项目要用到cesium,然后参照网上的一些步骤,最后发现报错了,其中有两种错比较多:
① This dependency was not found: * cesium/Cesium in ./src/main.js. To install it, you can run: npm install --save cesium/Cesium
② prototype ‘Viewer’ undefined
然后就各种查阅各种调试,终于弄好了,现在来跟大家分享一下。
①鼠标右键桌面,打开Git Bash Here
②安装vue-cli
npm install vue-cli -g
③建立一个基于webpack的vue项目
vue init webpack drafting(drafting为项目名称,不能用中文)
④进入在桌面已创建好的 drafting 文件,启动项目
cd drafting =========》 npm run dev
此时就建立了一个基础的vue项目
⑤安装cesium.js
npm install cesium --save
⑥修改cesium的webpack配置
1.修改build/webpack.base.conf.js文件
1.1 添加1行代码:
const cesiumSource = '../node_modules/cesium/Source'
1.2 添加modules.exports的内容
在modules.exports模块中添加
amd: {
toUrlUndefined: true
},
再在modules.exports模块中的output里添加
sourcePrefix: ' '
最后在modules.exports模块中的resolve里的alisa里添加
'cesium': path.resolve(__dirname, cesiumSource) 注: __dirname 是两个小下划线
1.3 在module模块中加入
unknownContextCritical: false
2.修改 build/webpack.dev.conf.js 文件
2.1 添加2行代码
const cesiumSource = 'node_modules/cesium/Source'
const cesiumWorkers = '../Build/Cesium/Workers'
2.2 在plugins模块中加入
new 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 webpack.DefinePlugin({
CESIUM_BASE_URL: JSON.stringify('')
})
3.修改build/webpack.prod.conf.js 文件
3.1添加2行代码
const cesiumSource = 'node_modules/cesium/Source'
const cesiumWorkers = '../Build/Cesium/Workers'
3.2 在plugins 模块中添加
new 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 webpack.DefinePlugin({
CESIUM_BASE_URL: JSON.stringify('./')
})
4.修改config/index.js 文件
4.1 将 assetsPublicPath的值设置为空
assetsPublicPath: '',
=============================================(重点来了)======================================================
一般都是做到这一步,然后就在mainjs里面导入 cesium 导入样式 然后初始化 但是这样报错就来了,那我们应该怎么做呢?
首先到 node_modules/cesium/Build/Cesium 文件,可以看到里面还有四个文件夹和Cesiumjs
直接复制Cesium文件夹 粘贴到 根目录的 static文件夹里
mainjs中不需要手动导入任何文件,默认就好,然后打开index.html,用script标签去引入cesiumjs
最后我们去到HelloWorld.vue( 如果像我一样测试的话可以不用改名,在实际项目中一定要改名字,改了组件的名字不要忘了也要修改路由里的名字 )文件里
记得这个地方还要引入css,不然样式会错乱的。保存一下,启动项目,打开浏览器(如果配置正确了,8080端口没有被占用,一般都是localhost:8080)也可以在config/index.js 里修改port端口号
打开网页后:
这里面一些小空间很烦人,如果你不需要可以去掉,在初始化中配置:
这些具体某个是干嘛用的 ,大家可以查阅一下,有这方面的文档)
去掉后:
(这默认打开的是美洲的视角,如果我们想一进来就把视角放在中国呢)
加完之后 ,刷新页面,你看到的就是这样了:
vue+cesiumjs的环境搭建【script引入】的更多相关文章
- windows下vue.js开发环境搭建教程
这篇文章主要为大家详细介绍了windows下vue.js开发环境搭建教程,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 最近,vue.js越来越火.在这样的大浪潮下,我也开始进入vue的学习行列中 ...
- Vue.js 运行环境搭建详解(基于windows的手把手安装教学)及vue、node基础知识普及
Vue.js 是一套构建用户界面的渐进式框架.他自身不是一个全能框架——只聚焦于视图层.因此它非常容易学习,非常容易与其它库或已有项目整合.在与相关工具和支持库一起使用时,Vue.js 也能完美地驱动 ...
- Electron+Vue+ElementUI开发环境搭建
Node环境搭建 本文假定你完成了nodejs的环境基础搭建: 镜像配置(暂时只配置node包镜像源,部分包的二进制镜像源后续讨论).全局以及缓存路径配置,全局路径加入到了环境变量 $ node -v ...
- Vue ---- 项目与环境搭建 初始项目结构 Vue生命周期
目录 1. vue环境搭建 2. Vue项目搭建 pycharm配置并启动vue项目 3 . 认识项目 1. vue项目目录结构 2. 配置文件:vue.config.js 3. main.js 4. ...
- vue.js开发环境搭建以及创建一个vue实例
Vue.js 是一套构建用户界面的渐进式框架.Vue 只关注视图层, 采用自底向上增量开发的设计.Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件. 在使用 vue.js ...
- vue初级学习--环境搭建
一.导语 最近总想学点东西,es6啊.typescript啊,都想学,刚好有个机遇,可以学点vue,嗯,那就开始吧. 二.正文 1.node环境: 下载安装nodeJs,最好是1.6以上的版本,下载地 ...
- vue的开发环境搭建命令加图解
vue的开发环境的搭建 不管什么软件我们都要去官网下载安装,这是作为专业程序员的安全意识. 1.安装node.js 官方下载的页面:点击这里 大约展示的页面是这样子的!我们演示是windows 64位 ...
- vue学习001 --环境搭建
系统 : win cmd: cmder 链接:https://cmder.net/ 1.安装node.js 链接地址: http://cdn.npm.taobao.org/dist/node/v10. ...
- 应用一:Vue之开发环境搭建
简单分享下vue项目的开发环境搭建流程~ 1.安装nodeJS vue的运行是要依赖于node的npm的管理工具来实现,下载地址:https://nodejs.org/en/.安装完成之后以管理员身份 ...
随机推荐
- 转:KVM 虚拟机的克隆
KVM 虚拟机的克隆 首先把需要克隆的源虚拟机先关闭,然后使用以下命令来进行克隆,注意我这里使用的是相对路径. virsh shutdown VM02 virt-clone -o VM02 -n ...
- 【虚拟机】:"该虚拟机似乎正在使用中。 如果该虚拟机未在使用,请按“获取所有权(T)”按钮获取它的所有权。否则,请按“取消(C)”按钮以防损坏。"
1.可能是由于上次使用虚拟机,没有正常关闭出现了这种情况,于是把问题复制粘贴搜了一下. 2.出现了如下可行的解决方法:把后缀名为.vmdk.lck的都删除掉. 3.然后再打开虚拟机就可以了.
- Electron-vue实战(二)— 请求Mock数据渲染页面
Electron-vue实战(二)— 请求Mock数据渲染页面 作者:狐狸家的鱼 本文链接 GitHub:sueRimn 一.环境搭建 1.安装Mock.js 如果仅仅用作脱离后台的模拟数据,就安装在 ...
- python 环境准备-centos7
python3环境搭建[本身centosyum底层也是py2.x实现的,装3.x的时候要实现多版本共存这里解决了这些问题] 安装编译环境# yum -y groupinstall 'Developme ...
- Elasticsearch:使用function_score及soft_score定制搜索结果的分数
我们将介绍使用function_score的基础知识,并介绍一些function core技术非常有用和有效的用例. 介绍 评分的概念是任何搜索引擎(包括Elasticsearch)的核心.评分可以粗 ...
- c++11 中的注意事项
1. C++11标准中让类的析构函数默认也是noexcept(true)的. 但如果显式地为析构函数指定了noexcept,或者类的基类或成员有noexcept(false)的析构函数,析构函数就不会 ...
- kubernetes批量删除pod
监控页面出现看到有运行失败的pod 1) 查看有哪些不运行的podcustom-metrics-apiserver日志占满空间被驱逐 [root@hadoop03 ~]# kubectl get po ...
- 自己封装 vue 组件 和 插件
vue 组件 一.组件的创建,两种方法.(本质上是1.2两种,vue文件,只是创建了一个 组件选项对象,仅是一个js对象)1.定义组件:Vue.component('button-counter', ...
- 优化问题及KKT条件
整理自其他优秀博文及自己理解. 目录 无约束优化 等式约束 不等式约束(KKT条件) 1.无约束优化 无约束优化问题即高数下册中的 “多元函数的极值" 部分. 驻点:所有偏导数皆为0的点: ...
- 运维 04 Shell基础命令(二)
Shell基础命令(二) 查看Linux的发行版 cat /etc/redhat-release cat /etc/os-release 查看系统用户的id信息 id 用户名 id root id ...