【可以看我的博客里另外一篇----- 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引入】的更多相关文章

  1. windows下vue.js开发环境搭建教程

    这篇文章主要为大家详细介绍了windows下vue.js开发环境搭建教程,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 最近,vue.js越来越火.在这样的大浪潮下,我也开始进入vue的学习行列中 ...

  2. Vue.js 运行环境搭建详解(基于windows的手把手安装教学)及vue、node基础知识普及

    Vue.js 是一套构建用户界面的渐进式框架.他自身不是一个全能框架——只聚焦于视图层.因此它非常容易学习,非常容易与其它库或已有项目整合.在与相关工具和支持库一起使用时,Vue.js 也能完美地驱动 ...

  3. Electron+Vue+ElementUI开发环境搭建

    Node环境搭建 本文假定你完成了nodejs的环境基础搭建: 镜像配置(暂时只配置node包镜像源,部分包的二进制镜像源后续讨论).全局以及缓存路径配置,全局路径加入到了环境变量 $ node -v ...

  4. Vue ---- 项目与环境搭建 初始项目结构 Vue生命周期

    目录 1. vue环境搭建 2. Vue项目搭建 pycharm配置并启动vue项目 3 . 认识项目 1. vue项目目录结构 2. 配置文件:vue.config.js 3. main.js 4. ...

  5. vue.js开发环境搭建以及创建一个vue实例

    Vue.js 是一套构建用户界面的渐进式框架.Vue 只关注视图层, 采用自底向上增量开发的设计.Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件. 在使用 vue.js ...

  6. vue初级学习--环境搭建

    一.导语 最近总想学点东西,es6啊.typescript啊,都想学,刚好有个机遇,可以学点vue,嗯,那就开始吧. 二.正文 1.node环境: 下载安装nodeJs,最好是1.6以上的版本,下载地 ...

  7. vue的开发环境搭建命令加图解

    vue的开发环境的搭建 不管什么软件我们都要去官网下载安装,这是作为专业程序员的安全意识. 1.安装node.js 官方下载的页面:点击这里 大约展示的页面是这样子的!我们演示是windows 64位 ...

  8. vue学习001 --环境搭建

    系统 : win cmd: cmder 链接:https://cmder.net/ 1.安装node.js 链接地址: http://cdn.npm.taobao.org/dist/node/v10. ...

  9. 应用一:Vue之开发环境搭建

    简单分享下vue项目的开发环境搭建流程~ 1.安装nodeJS vue的运行是要依赖于node的npm的管理工具来实现,下载地址:https://nodejs.org/en/.安装完成之后以管理员身份 ...

随机推荐

  1. JVM&GC

    先回顾啥是JVM: 引用: 强引用(Strong Reference)•默认的赋值语句可以生成一个强引用•GC时不会被释放 软引用(Soft Reference)•仅被java.lang.ref.So ...

  2. Antd Vue 问题集合

    1.table列宽问题 在滚动列时,如果要指定列宽,不要指定所有列宽,至少预留一列不执行列宽. 同时:scroll="{ x: width}", width的值要是所有列的宽度之和 ...

  3. Java虚拟机解析篇之---垃圾回收器

    上一篇说了虚拟机的内存模型,在说到堆内存的时候我们提到了,堆内存是Java内存中区域最大的一部分,而且垃圾回收器主要就是回收这部分的内容.那么这篇就来介绍一下垃圾回收器的原理以及回收的算法. Java ...

  4. Cisco基础(四):配置标准ACL、配置扩展ACL、配置标准命名ACL、配置扩展命名ACL

    一.配置标准ACL 目标: 络调通后,保证网络是通畅的.同时也很可能出现未经授权的非法访问.企业网络既要解决连连通的问题,还要解决网络安全的问题. 配置标准ACL实现拒绝PC1(IP地址为192.16 ...

  5. LUOGU P4587 [FJOI2016]神秘数(主席树)

    传送门 解题思路 如果区间内没有\(1\),那么答案就为\(1\),从这一点继续归纳.如果区间内有\(x\)个\(1\),设区间内\([2,x+1]\)的和为\(sum\),如果\(sum=0\),那 ...

  6. Another Blog

    I also hold a blog with thoughts of English learning. Get there ===>. It's a private blog. Actual ...

  7. 一些idea

    二分答案似乎和最小生成树有着不可描述的奇怪关系.(滑稽 联赛级别的在矩形上乱搞的题无非几个思路(按出现概率排序):建图,二维前缀和,dp 涉及到求合法区间数的问题往往要用到桶.等差数列等思想,或者尝试 ...

  8. Oracle数据库中,sql中(+)(-)的含义

    SELECT *FROM TABLE1 A,TABLE2 B WHERE A.ID(+)=B.ID; 右连接=RIGHT JOIN SELECT *FROM TABLE1 A,TABLE2 B WHE ...

  9. JS基础入门篇(二十七)—BOM

    虽然上次写到js基础篇(二十四),这次直接写到(二十七).是为了提醒自己中间有几篇没写.特此说明一下啊. 1.window.open() 使用a标签呢,点击一下a标签页面才会跳转,有时候我们需要做的操 ...

  10. bootstrap的模态框的使用

    bootstrap的模态框 如果只想单独使用模态框功能,可以单独引入modal.js,和bootstrap的css,在bootstrap的包中,可引入bootstrap.js. 用法 通过data属性 ...