本项目是vue3的vue-cli构建的框架,使用的typescript开发,构建了一个加载cesium地球的一个简单实例。 在此分享的目的是记录自己构建的过程,构建工程主要参照cesium官网的Install with NPM,但是过程中需要根据自己的情况做调整,主要是两个方面一个是webpage打包配置和widgets.css引入问题,稍后详解
- node版本 v14.18.1
- npm版本 6.14.15
- vue-cli 5.0.3
- vue 3.2.13
- cesium 1.91.0
- 开发工具 vscode
通过npm 安装引入的cesium,cesium的声明文件会自动导入。
本项目是通过你npm install 安装的最新版本,完全避免通过在html中静态引入方式。
你需要解决这个问题本项目才能正常跑起来!
原因:因为解决CSS应用问题需要修改node_modules中cesium包的package.json,但是node_modules没有上传到GitHub,所以你下载本项目后需要按照此方法解决。
问题本身:按照Install with NPM
//直接使用这个代码,会提示找不到文件
import "cesium/Build/Cesium/Widgets/widgets.css";
解决问题: 打开目录\node_modules\cesium\package.json做如下修改
"exports": {
"./package.json": "./package.json",
"./Build/Cesium/Widgets/widgets.css": "./Build/Cesium/Widgets/widgets.css",//只需要添加此行
".": {
"require": "./index.cjs",
"import": "./Source/Cesium.js"
}
},
此问题在本项目代码已经解决,这里只是解释一些问题和解决方法。
根据cesium官网的指南Install with NPM,Cesium需要请求的静态文件必须要挂载在打包文件中(dist),我们是通过npm install cesium的,在public目录下是没有cesium的静态文件的,所以需要在打包的时候把node_modules下的四个文件夹拷贝到打包文件加下(dist)
- node_modules/cesium/Build/Cesium/Workers
- node_modules/cesium/Build/Cesium/ThirdParty
- node_modules/cesium/Build/Cesium/Assets
- node_modules/cesium/Build/Cesium/Widgets
我们已经知道需求是拷贝以上4个文件夹到dist目录,下一步How to do: 这里需要用npm 装两个包copy-webpack-plugin和path,打开vue.config.js(vue3的webpack配置),配置如下:
const path = require('path');
const CopyPlugin = require('copy-webpack-plugin');
const cesiumBuild = 'node_modules/cesium/Build/Cesium';
module.exports = {
configureWebpack: {
plugins: [
new CopyPlugin({
patterns: [
{ from: path.join(cesiumBuild, 'Workers'), to: 'Cesium/Workers' },
{ from: path.join(cesiumBuild, 'ThirdParty'), to: 'Cesium/ThirdParty' },
{ from: path.join(cesiumBuild, 'Assets'), to: 'Cesium/Assets' },
{ from: path.join(cesiumBuild, 'Widgets'), to: 'Cesium/Widgets' }
],
}),
],
}
};
npm install
npm run serve
npm run build