上篇文章介紹瞭如何搭建 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" }
以上是發佈環境的全部增量配置,如何您是新建項目,請先配置開發環境,再按照上面的步驟配置發佈環境。