搭建项目脚手架省略...
运行下载cesium依赖包:
npm install cesium --save
修改build/webpack.base.conf.js文件
const cesiumSource = '../node_modules/cesium/Source' //添加
//在modules.exports模块中添加
amd: {
toUrlUndefined: true
},
//在modules.exports模块中的output里添加
sourcePrefix: ' ',
//在modules.exports模块中的resolve里的alisa里添加
'cesium': path.resolve(__dirname, cesiumSource)
//在module模块中加入
unknownContextCritical: false
修改 build/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 webpack.DefinePlugin({
CESIUM_BASE_URL: JSON.stringify('')
})
修改build/webpack.prod.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 webpack.DefinePlugin({
CESIUM_BASE_URL: JSON.stringify('./')
})
修改config/index.js 文件
//将 assetsPublicPath的值设置为空
assetsPublicPath: '',
复制node_modules的Cesium文件夹 粘贴到 根目录的 static文件夹里
首先到 node_modules/cesium/Build/Cesium 文件,可以看到里面还有四个文件夹和Cesiumjs,直接复制Cesium文件夹 粘贴到 根目录的 static文件夹里
首页script引入·
<script src="/static/Cesium.js"></script>
页面使用
<div class="boxs" id="cesiumContainer"></div>
import '../../node_modules/cesium/Build/Cesium/Widgets/widgets.css'
mounted() {
this.init()
},
methods: {
init(){
this.viewer = new Cesium.Viewer('cesiumContainer',{})
},
image.png
地址:
https://www.cnblogs.com/reround/p/11943717.html
网友评论