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端口號

打開網頁後：

這裏面一些小空間很煩人，若是你不須要能夠去掉，在初始化中配置：

這些具體某個是幹嗎用的 ，你們能夠查閱一下，有這方面的文檔）

去掉後：

（這默認打開的是美洲的視角，若是咱們想一進來就把視角放在中國呢）

加完以後 ，刷新頁面，你看到的就是這樣了：