目录
3、配置build/webpack.base.conf.js文件
一、主要环境介绍
- NodeJs:最起码8以上吧
- npm:6以上吧
- vue:2.9.6
- webpack:3.6.0
- Cesium:1.64
二、环境部署
上面那些环境都给部署好即可,先不用部署cesium
三、项目搭建与配置
1、创建项目
vue init webpack projectname
//projectname是项目名称,自己取
2、安装Cesium环境
//首先保证进入了项目所在的文件夹
npm install cesium --save
3、配置build/webpack.base.conf.js文件
(1)定义cesium源码路径
const cesiumSource = '../node_modules/cesium/Source'
(2)output中加入sourcePrefix: ' ',让webpack可以正确处理多行字符串;
output: {
path: config.build.assetsRoot,
filename: '[name].js',
publicPath: process.env.NODE_ENV === 'production'
? config.build.assetsPublicPath
: config.dev.assetsPublicPath,
sourcePrefix:'', //添加这一行
},
(3)添加amd模式支持
output: {
path: config.build.assetsRoot,
filename: '[name].js',
publicPath: process.env.NODE_ENV === 'production'
? config.build.assetsPublicPath
: config.dev.assetsPublicPath,
sourcePrefix:'',
},
amd:{
toUrlUndefined:true, //添加这个设置
},
(4)resolve中别名设置,引入时候直接根据别名就可以找到cesium包
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
// Cesium module name
'cesium': path.resolve(__dirname, cesiumSource), //添加这一句
}
},
(5)module中加入unknownContextCritical: false,
让webpack 打印载入特定库时候警告
module: {
rules: [
...
],
//不让webpack打印载入特定库时候发出警告
unknownContextCritical:false,
// unknownContextRegExp: /^.\/.*$/, //这个很多都推荐了,但是实测的时候发现会报错,先不用
},
4、配置webpack.dev.conf.js文件
(1)该文件开头位置,定义cesium源码路径,定义cesium workers路径
const cesiumSource = 'node_modules/cesium/Source'
const cesiumWorkers = '../Build/Cesium/Workers'
(2)plugins中加入插件,拷贝静态资源
// Copy Cesium Assets, Widgets, and Workers to a static directory
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('')
}),
5、配置webpack.prod.conf.js文件
(1)该文件开头部分,添加cesium源码路径,定义cesium workers路径
const cesiumSource = 'node_modules/cesium/Source'
const cesiumWorkers = '../Build/Cesium/Workers'
(2)plugins中加入插件,拷贝静态资源。注意这里的CESIUM_BASE_URL: JSON.stringify('./')
与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('./')
}),
6、配置config/index.js文件
配置config文件夹下的index.js文件,这个文件有dev、build两个配置项目,在build配置项下,配置assetsPublicPath为''。
build: {
// Template for index.html
index: path.resolve(__dirname, '../dist/index.html'),
// Paths
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: '', //修改这个地方
}
四、helloword式起步开发
整个vue文件,路由挂载上,能正常显示出来后,写cesium的helloWorld式起步功能,让那个立体球球能显示出来:
其中注意
(1)cesium导入的方式,1.6版本以后只能通过require导入了,之前网上的几乎都是通过import导入,实测不行。
(2)cesiumContainer样式自己写
<template>
<div class="hello">
<div id="cesiumContainer"></div>
</div>
</template>
<script>
//import Cesium from 'cesium/Cesium' //cesium1.6以前支持immport导入,1.6以后不支持了,采取下面的措施
let Cesium = require('cesium/Cesium') //cesium1.6版本以后导入的方式
import 'cesium/Widgets/widgets.css'
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
},
mounted(){
Cesium.Ion.defaultAccessToken = '自己申请token';
const viewer = new Cesium.Viewer('cesiumContainer')
},
}
</script>
五、备注
正常运行后,在界面底部会有一个 access token 的提示,去官网上申请一个 access token ,在 new Cesium.Viewer 前添加 一行代码:
Cesium.Ion.defaultAccessToken = ‘your_access_token’