react 地图发布 cesium 篇
程序员文章站
2022-05-15 14:21:59
上篇文章介绍了如何搭建 react cesium 开发环境。在开发环境下,项目一切运行正常。最近把项目打包发布出来,却遇见了 cesium 不能正确初始化。打开浏览器的调试面板,出现好多 404,资源路径错误。下面是项目的资源处理过程整理,其中 cesium 需要独立处理,大家以后要注意。 一、re ......
上篇文章介绍了如何搭建 react cesium 开发环境。在开发环境下,项目一切运行正常。最近把项目打包发布出来,却遇见了 cesium 不能正确初始化。打开浏览器的调试面板,出现好多 404,资源路径错误。下面是项目的资源处理过程整理,其中 cesium 需要独立处理,大家以后要注意。
一、react 静态资源处理
修改 config/paths.js
function getservedpath(apppackagejson) { ... const servedurl = envpublicurl || (publicurl ? url.parse(publicurl).pathname : "./"); ... }
二、cesium 资源处理
这个是重点,如果不处理,项目构建后会无法正常运行,cesium 资源会报 404 错误。主要思路是,在加载 cesium 之前设置 cesium 资源的 baseurl,调用 cesium 自带的 buildmoduleurl 函数来设置 baseurl。
修改 /src/index.js,增加如下代码
... import buildmoduleurl from "cesium/core/buildmoduleurl"; buildmoduleurl.setbaseurl("./"); ...
三、关闭 cesium 的一些警告信息
修改 config/webpack.config.js
module.exports = function(webpackenv) { return { module: { unknowncontextcritical: false } }; };
四、关闭 sourcemap
修改 package.json
"scripts": { "build": "cross-env generate_sourcemap=false node scripts/build.js" }
以上是发布环境的全部增量配置,如何您是新建项目,请先配置开发环境,再按照上面的步骤配置发布环境。