创建一个基于webpack的vue项目
vue init webpack 你的项目名
安装cesium
npm i cesium --save
修改webpack配置
先修改webpack.base.conf.js文件
有五个地方需要修改
1. const cesiumSource = '../node_modules/cesium/Source'
2. sourcePrefix: ' '
3. amd: {
toUrlUndefined: true
}
4.'cesium': path.resolve(__dirname, cesiumSource)
5.unknownContextCritical: false
然后修改webpack.dev.conf.js 文件
有两个地方需要修改
1. const cesiumSource = 'node_modules/cesium/Source'
const cesiumWorkers = '../Build/Cesium/Workers'
2. 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('')
})
再修改webpack.prod.conf.js 文件
有两个地方需要修改
1. const cesiumSource = 'node_modules/cesium/Source'
const cesiumWorkers = '../Build/Cesium/Workers'
2. 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('./')
})
接着需要修改config/index.js 文件
assetsPublicPath: '',
首先到 node_modules/cesium/Build/Cesium 文件,可以看到里面还有四个文件夹和Cesiumjs
直接复制Cesium文件夹 粘贴到 根目录的 static文件夹里
mainjs中不需要手动导入任何文件,默认就好,然后打开index.html,用script标签去引入cesiumjs
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>cesium_webpack_demo</title>
<script src="/static//Cesium/Cesium.js"></script>
<link href="/static/Cesium/Widgets/widgets.css">
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
最后新建一个cesiumContainer.vue
<template>
<div class="container">
<div id="cesiumContainer"></div>
</div>
</template>
<script>
import "../../node_modules/cesium/Build/Cesium/Widgets/widgets.css";
export default {
name: "cesiumContainer",
data() {
return {
viewer: "",
};
},
mounted() {
this.init();
},
methods: {
init() {
this.viewer = new Cesium.Viewer("cesiumContainer", {});
this.startup()
},
startup() {
var viewer = this.viewer
viewer.animation.container.style.visibility = 'hidden' // 不显示动画控件
viewer.timeline.container.style.visibility = 'hidden' // 不显示时间线控件
},
},
};
</script>
<style scoped>
</style>
现在运行代码
npm run start