Vue+Cesium项目环境搭建

①基础环境安装

node.js(检测npm包管理工具 npm -v)
Webpack安装(全局安装 npm install webpack -g)(检测安装成功: webpack -v)
vue-cli脚手架构建工具（npm install vue-cli -g）（检测：vue -V）
②vue项目搭建
命令行cd进入项目构建文件目录级，执行vue init webpack project_name(项目名不可用中文)，按提示输入相应内容，项目文件构建完成。
cd到项目目录内，安装项目依赖npm install，项目启动npm run dev
浏览器进入地址http://localhost:8080，打开项目页面，搭建完成。
③cesium环境配置
安装cesium组件库 npm install cesium --save
在build/webpack.base.conf.js下，
定义cesium源码路径

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

var webpack = require('webpack')

在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: ' '

},

在resolve中设置cesium别名

resolve: {

    extensions: ['.js', '.vue', '.json'],

    alias: {

      'vue$': 'vue/dist/vue.esm.js',

      '@': resolve('src'),

      'cesium': path.resolve(__dirname, cesiumSource)

    }

},

module里添加

module: {

    rules: [

    ],

    unknownContextCritical: false,

},
配置 webpack.dev.conf.js 文件
配置路径

const cesiumSource = 'node_modules/cesium/Source'

const cesiumWorkers = '../Build/Cesium/Workers'

在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 CopyWebpackPlugin([{ from: path.join(cesiumSource, 'ThirdParty/Workers'), to: 'ThirdParty/Workers' }]),

    new webpack.DefinePlugin({

      // Define relative base path in cesium for loading assets

      CESIUM_BASE_URL: JSON.stringify('')

    })
配置webpack.prod.conf.js文件
配置路径

const cesiumSource = 'node_modules/cesium/Source'

const cesiumWorkers = '../Build/Cesium/Workers'

在plugins添加如下插件，与dev配置略有不同

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 CopyWebpackPlugin([ { from: path.join(cesiumSource, 'ThirdParty/Workers'), to: 'ThirdParty/Workers' } ]),

    new webpack.DefinePlugin({

      // Define relative base path in cesium for loading assets

    //定义 Cesium 从哪里加载资源，如果使用默认的''，却变成了绝对路径了，所以这里使用'./',使用相对路径

      CESIUM_BASE_URL: JSON.stringify('./')

    })
修改config里index.js中build中的assetsPublicPath为‘’
// Paths

assetsRoot: path.resolve(__dirname, '../dist'),

assetsSubDirectory: 'static',

assetsPublicPath: '',
配置main.js
import Cesium from 'cesium/Cesium'

import widgets from 'cesium/Widgets/widgets.css'

Vue.prototype.Cesium = Cesium

Vue.prototype.widgets = widgets
修改components下的HelloWorld.vue组件
<template>

<div class="container">

    <div id="cesiumContainer"></div>

</div>

</template>

<script>

export default {

name: 'cesiumPage',

data () {

    return {

    }

},

mounted(){

    let Cesium = this.Cesium;

    var cesiumContainer = document.getElementById("cesiumContainer");

    var viewer = new Cesium.Viewer("cesiumContainer",{

      //加载在线谷歌地图

      imageryProvider: new Cesium.UrlTemplateImageryProvider({

         url:"http://www.google.cn/maps/vt?lyrs=s&x={x}&y={y}&z={z}"

      })

    })

}

}

</script>



<style scoped>

.container{

width:100%;

height:100%

}

#cesiumContainer{

width: 100%;

height: 100%

}

</style>
打开浏览器运行项目（localhost:8010）（默认端口号为8080，到config/index.js里可修改）

Vue+Cesium项目环境搭建

猜你喜欢