下载安卓APP箭头
箭头给我发消息

客服QQ:3315713922

web前端:react 地图发布 cesium 篇

作者: lifefriend_007     来源: https://www.cnblogs.com/lifefriend/p/11400242.html点击数:1623发布时间: 2020-03-02 11:47:01

标签: 渲染reactweb前端

Web开发

  React起源于Facebook的内部项目,因为该公司对市场上所有JavaScriptMVC框架,都不满意,就决定自己写一套,用来架设Instagram的网站。做出来以后,发现这套东西很好用,就在2013年5月开源了。

  上篇文章介绍了如何搭建reactcesium开发环境。在开发环境下,项目一切运行正常。最近把项目打包发布出来,却遇见了cesium不能正确初始化。打开浏览器的调试面板,出现好多404,资源路径错误。下面是项目的资源处理过程整理,其中cesium需要独立处理,大家以后要注意。

  一、react静态资源处理

  修改config/paths.js

  functiongetServedPath(appPackageJson){

  ...

  constservedUrl=envPublicUrl||(publicUrl?url.parse(publicUrl).pathname:"./");

  ...

  }

  二、cesium资源处理

  这个是重点,如果不处理,项目构建后会无法正常运行,cesium资源会报404错误。主要思路是,在加载cesium之前设置cesium资源的baseUrl,调用cesium自带的buildModuleUrl函数来设置baseUrl。

  修改/src/index.js,增加如下代码

  ...

  importbuildModuleUrlfrom"cesium/Core/buildModuleUrl";

  buildModuleUrl.setBaseUrl("./");

  ...

  三、关闭cesium的一些警告信息

  修改config/webpack.config.js

  module.exports=function(webpackEnv){

  return{

  module:{

  unknownContextCritical:false

  }

  };

  };

  四、关闭sourceMap

  修改package.json

  "scripts":{

  "build":"cross-envGENERATE_SOURCEMAP=falsenodescripts/build.js"

  }

  以上是发布环境的全部增量配置,如何您是新建项目,请先配置开发环境,再按照上面的步骤配置发布开发环境。

  React主要用于构建UI。你可以在React里传递多种类型的参数,如声明代码,帮助你渲染出UI、也可以是静态的HTMLDOM元素、也可以传递动态变量、甚至是可交互的应用组件。

赞(8)
踩(0)
分享到:
华为认证网络工程师 HCIE直播课视频教程