vue+cesiumjs的环境搭建【script引入】

【能够看个人博客里另一篇----- import引入 ，能够不用script引入】

地址：http://www.javashuo.com/article/p-osbdtunb-bs.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端口号

打开网页后：

这里面一些小空间很烦人，若是你不须要能够去掉，在初始化中配置：

这些具体某个是干吗用的 ，你们能够查阅一下，有这方面的文档）

去掉后：

（这默认打开的是美洲的视角，若是咱们想一进来就把视角放在中国呢）

加完以后 ，刷新页面，你看到的就是这样了：