Taro小程序兼容H5打包问题

记录在实际开发过程中，所遇到的Taro小程序打包的问题。

---

---

一、多端同时运行

在处理小程序和H5兼容问题时，修改一个地方常常需要小程序和H5一起查看效果，但是在Taro打包配置中，默认的编译文件在/dist目录下，当我们启动小程序再启动H5时，会将小程序已经编译好的/dist目录覆盖；
根据启动或打包的端修改打包后的目录，在config/index编译配置文件中修改outputRoot的打包目录。
【参考文档】

const const {
	...,
	outputRoot: `dist/${process.env.TARO_ENV}`
}

注意：小程序还要要修改 project.config.json 的 miniprogramRoot， 如：

"miniprogramRoot": "dist/weapp/"

打开不同的控制台，将需要调试的平台命令跑起来

npm run dev:weapp
npm run dev:h5

在 dist 目录下会多两个文件

dist/weapp
dist/h5

Tips:修改完之后，小程序记得重新选择项目路径 /dist/weapp，不然你会发现，你修改的代码永远都不会生效。

二、第三方UI库打包后，组件大小不一致

config/index编译配置文件中修改

  h5: {
    esnextModules: ['taro-ui'],
  }

三、在小程序中，引入 app.config.js 没有问题，在h5中，引入报错

当需要获取 app.config.js 内的配置的路由路径时，在小程序引入是正常的，在H5中会报错误，从打包的结果来看，dist文件在weapp是存在app.config.js，而H5是没有的，错误如下：

"export 'default' (imported as 'app') was not found in '../app.config.js'

将需要导出的数据单独放到一个新的js文件中，在 app.config.js 是使用 import 引入，其他地方引入也同理。

四、taro 打包成 h5，css中的图片引入路径会改变

这是因为 publicPath 打包后输出的路径， 默认/

1. publicPath 设置为 /时：
   设置为根路径 / 时，资源将从网站的根目录开始加载。这有助于确保资源的一致路径，但有时可能会导致 CSS 和 JS 文件的加载问题，特别是在本地开发或部署在非根目录时。

2. publicPath 设置为 ./时：
   当设置为相对路径 ./ 时，资源加载路径会相对于服务器的当前页面。这可能导致 CSS 中的背景图路径出现问题，因为它们可能需要相对于项目根目录的路径来正确加载。

3. 当你使用二级域名或不在二级域名时，例如：https://www.baidu.com/test，H5打包完之后需要放在 www.baidu.com 域名目录下的 test 文件，publicPath 改为：

publicPath: '/test/'

注意：publicPath 和 nxgix 也有关联，这些方法不一定适配你当前的项目。

五、taro部分版本问题记录

3.3.1   Swiper 组件在 IOS h5中每张图片第一次加载时，会将页面重新渲染一次，往下滑动之后，会造成会返回顶部；
3.3.2   Swiper 组件在 IOS h5中每张图片第一次加载时，会将页面重新渲染一次，往下滑动之后，会造成会返回顶部；
3.3.3  	Swiper 组件刷新问题处理了，h5 第一次加载会有白屏可能。

总结

以上就是在处理Taro小程序兼容H5过程中遇到的打包问题，可能会有遗漏的记录，不过代码能先跑起来在讨论其他兼容问题。
js和组件兼容问题下篇文章在做记录。