微前端基座本地调试方式研究

基座在本地开发的时候,打开的是基座项目,基座里面什么都没有,无法看到真实场景,因此我们现在就要想办法解决。
由于基座项目是一个单独的项目,它主要作用是通过 systemimport.js 引入其他项目的路由和接口,然后通过路由引入对应的模块 JS 文件。由于 systemimport.js 引用的是不同域名下的 js 文件,例如:dev.songshu.com、test.songshu.com...
由于 webapck 在打包构建的时候,如果 publicPath 写的是 "/" 分割出来的 chunk 的路径就是引用相对路径。也就是说如果我引用服务器上的 systemimport.js 就会引用服务器上的路由,由于服务器上打包出来的 chunk 的 publicPath 是 "/",是相对路径,因此路由引用对应的组件 js 文件就是相对路径,由于基座是在本地开发,因此引用的就是本地的 js 文件,本地没有这个文件就会报 404 错误。我们现在就是要解决这个问题。
这个问题的核心就是要解决服务器上路由引用组件的 js 文件路径问题,这样我们在打包的时候,将项目的 publicPath 打包成对应的环境域名就可以了。

相关推荐