vue3 vue-cli(5+) cesium(1.90+)安装配置教程(共5种方式-推荐第3-4种)
0.前提
[0] vue3作为3大前端框架之一,且上手较为简单,再结合element-plus等样式库插件,为100人团队以下,且开发网站并不像taobao那样复杂的话,可以推荐使用它。当然使用jQuery或者手撸代码依然可以。并且cesium的官方代码大部分都是通过<script>引入的,手撸js代码!不利于快速搭建复杂的网站代码!
[1] 安装环境为
nodejs: 16.14+、npm: 8.5.0+
vue-cli: 5.0+、vue3、cesium: 1.90+
[2] node安装以及相关配置,百度即可!
[3] 注意:vue与cesium的搭配,网上打包有问题,个人尝试了一下确实有问题!然后解决这个问题有5种方法,尝试了4种,未来可能第5种比较适合吧。这篇博客写的挺好的。其实cesium的github官方仓库中有webpack的配置https://github.com/CesiumGS/cesium-webpack-example
(1) 第1种方法:vue-cli-plugin-cesium [2年不更新了]
(2) 第2种方法: vue-cesium插件,像其他插件那样使用即可,确实提高生产力,但是不推荐,还是推荐官方库。(后面可能会尝试一下!)
(3) 第3种方法:直接在index.html中采用<script>方式引入(成功),适用于1.90以上所有版本。
这里注意:npm install cesium或者直接下载cesium包,只复制build中2个文件中的任意1个Cesium 到 vue项目中public文件夹中,重命名为Cesium,然后在index.html中写入如下代码:,并在package.json中写入如下代码:,并且在vue.config.js中配置下面的参数(见下面webpack配置参数,构建时会把 public 文件夹下的资源原封不动复制到发布文件夹下,因此复制到public的Cesium文件夹不需要再配置vue.config.js参数):(为什么Source不可以,可能是因为public是已经打包好的,而source未打包,有些教程说:由于 npm 下载的 cesium 包中已经有官方打包好的 构建版本 库了,没有必要再次将 CesiumJS 源代码再次打包,而应将其作为外部依赖,不打包,使用 CDN 或 public 文件夹下的库程序、资源。)
(4) 第4种方法:修改vue.config.js,即:使用webpack的方法打包,着重参考官方github的example链接:https://github.com/CesiumGS/cesium-webpack-example,适用于1.90以上所有版本!在未参考这个链接之前,报https zlib等的问题,以及webpack版本导致的问题,可查看解析(Resolve) | webpack 中文文档,webpack版本带来的polyfill问题。官方着重修改了:fallback: { "https": false, "zlib": false, "http": false, "url": false }
(5) 第5种方法:vite vue3 cesium 这种方式据说会比较方便,尤其是vite开发时启动速度快!可能是后面的1个方向吧,不清楚wsam会不会逐渐起来呢!
--------------------------------------------------------------------------------------------------
1.vue-cli及相关库安装(第4种方式)
npm intsall -g vue-cli
再选择某个路径eg d:\vue3_cesium
vue create vue3_cesium,新建vue3_cesium的项目,选择vue3即可
进入vue3_cesium路径后,执行
npm install cesium
2.vue3-cesium配置(第4种方式)
[1] 配置vue.config.js(即webpack的相关设置)
注意:打包静态文件默认存储位置public。
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/' //按理说应该是未打包的
// 此处必需,因为高版本cesium没有这个Workers报错。必写-1
const cesiumWorkers = '../Build/Cesium/Workers'
module.exports = defineConfig({
transpileDependencies: true,
publicPath: './',
outputDir: "dist", // 输出文件目录
lintOnSave: false, // eslint 是否在保存时检查 关闭语法检查
// assetsDir: 'static', // 配置js、css静态资源二级目录的位置
configureWebpack: {
output: {
sourcePrefix: ' '
},
amd: {
toUrlUndefined: true
},
resolve: {
alias: {
'@': path.resolve('src'),
//'cesium': path.resolve(__dirname, cesiumSource),//如果有依赖cesium的库就需要下面这种。
'cesium': path.resolve(__dirname, './node_modules/cesium/')
},
// 参考官方github的,我不太懂webpack,所以都不知道咋解决https zlib问题 必写-2
fallback: { "https": false, "zlib": false, "http": false, "url": false },
},
plugins: [
// 对于webpack版本此处有不同配置,webpack低版本5.x执行下面4行注释的代码,对于webpack高版本9.x及以上,patterns是可以的。
new CopyWebpackPlugin({
patterns: [
{ from: path.join(cesiumSource, cesiumWorkers), to: 'Workers' },
{ from: path.join(cesiumSource, 'Assets'), to: 'Assets' },
{ from: path.join(cesiumSource, 'Widgets'), to: 'Widgets' },
{ from: path.join(cesiumSource, 'ThirdParty'), to: 'ThirdParty' },//需要整个ThirdParty
],
}),
// 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'), to: 'ThirdParty'}]),
new webpack.DefinePlugin({
CESIUM_BASE_URL: JSON.stringify('./')
// CopyWebpackPlugin from的绝对路径
})
],
// 不使用这个loader,也就不用安装
module: {
rules: [
{
test: /\.js$/,
use: {
loader: "@open-wc/webpack-import-meta-loader",
},
},
{
test: /\.(glb|gltf)?$/,
use: {
loader: "url-loader",
},
},
],
},
}
})
3.相关代码(第4种方式)
[1] app.vue //当然还有script setup语法糖简化//
<template>
<HelloWorld></HelloWorld>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
import { onMounted, reactive, ref } from 'vue'
export default {
name: 'App',
components: {
HelloWorld
},
setup() {
return {}
}
}
</script>
[2] HelloWorld.vue 可以再添加一些参数等;当然后面还得探索如何设计更复杂的页面!
<template>
<div id="CesiumContainer"></div>
</template>
<script>
// import * as Cesium from "cesium/Cesium.js";
// 改变了cesium alias的路径,采用推荐的import cesium,自动导入cesium/source/Cesium.js
import * as Cesium from "cesium";
// 导入cesium的css样式库,其实有点类似element-plus库全部导入时的样子
//import "cesium/Widgets/widgets.css";
import "cesium/Source/Widgets/widgets.css";
import {onMounted} from 'vue'
// vue2中是export default Vue.extend; vue3中是 export default defineComponent
export default{
name:'HelloWorld',
setup(){
// 只有等元素挂载渲染后,才可以将 html元素与cesium的viewer挂载
onMounted(() => {
let viewer = new Cesium.Viewer('CesiumContainer')
})
return {}
},
}
</script>
<style scoped>
#CesiumContainer{
widows: 100%;
height: 100%;
margin: 0;
padding: 0;
/* overflow: hidden; */
}
</style>
这是3dtiles矢量: