1.创建vue3项目
vue create vue3_cesium
2.安装cesium
进入项目目录后
npm i cesium --save
此时安装版本为1.94.3。在安装时可指定安装版本
3、配置vue.config.js
const { defineConfig } = require('@vue/cli-service')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const webpack = require('webpack')
const path = require('path')
let cesiumSource = './node_modules/cesium/Source'
module.exports = defineConfig({
transpileDependencies: true,
publicPath: './',
outputDir: "dist", // 输出文件目录
lintOnSave: false, // eslint 是否在保存时检查
assetsDir: 'static', // 配置js、css静态资源二级目录的位置
devServer: {
proxy: {
'/cnterrain20':{
target:'http://10.0.200.201:8083'
}
}
},
configureWebpack: {
output: {
sourcePrefix: ' '
},
amd: {
toUrlUndefined: true
},
resolve: {
alias: {
'@': path.resolve('src'),
'cesium': path.resolve(__dirname, cesiumSource)
}
},
plugins: [
new CopyWebpackPlugin({
patterns: [
{ from: path.join(cesiumSource, 'Workers'), to: 'Workers' },
{ from: path.join(cesiumSource, 'Assets'), to: 'Assets' },
{ from: path.join(cesiumSource, 'Widgets'), to: 'Widgets' },
{ from: path.join(cesiumSource, 'ThirdParty/Workers'), to: 'ThirdParty/Workers' },
],
}),
// new CopyWebpackPlugin([ { from: path.join(cesiumSource, 'Workers'), 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({
CESIUM_BASE_URL: JSON.stringify('./')
})
],
module: {
rules: [
{
test: /\.js$/,
use: {
loader: '@open-wc/webpack-import-meta-loader',
},
},
]
},
}
})
4.其他配置
对package.json中的eslintConfig配置中的rules项添加如下配置:
"no-unused-vars":"off"
安装其他工具
npm install @open-wc/webpack-import-meta-loader --save-dev
npm i node-sass@4.14.1 --save-dev
npm i sass-loader@10.1.0 --save-dev
5.引入
APP.vue代码如下:
<template>
<div id="container"></div>
</template>
<script>
var Cesium = require('cesium/Cesium');
var widgets= require('cesium/Widgets/widgets.css');
window.Cesium = Cesium
window.widgets = widgets
export default {
name: 'APP',
setup(){
},
mounted () {
window.viewer = new Cesium.Viewer('container');
}
}
</script>
<style scoped lang="scss">
#container {
width: 100%;
height: 100%;
}
</style>
运行,结果如下