解决taro打包后部分安卓机显示空白的问题

最新推荐文章于 2025-06-20 18:14:04 发布

原创最新推荐文章于 2025-06-20 18:14:04 发布 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#taro #webpack #javascript

针对Vue3应用在部分安卓设备上H5页面显示空白的问题，提供了解决方案。通过添加Babel转译、设置版本限制以及配置ES转换，确保应用能在低版本Android设备上正常运行。具体操作包括安装@babel/preset-env，修改babel.config.js以限定目标设备版本，以及在config/index.js中配置webpack进行ES转换。

taro3,vue3,H5打包,部分安卓机显示空白

解决方式

解决方式

1.添加 babel

yarn add @babel/preset-env --dev

2.添加版本限制

//babel.config.js
// babel-preset-taro 更多选项和默认值：
module.exports = {
  presets: [
    [
      "taro",
      {
        framework: "vue3",
        ts: false,
        targets: {
          ios: "9",
          android: "5"
        }
      }
    ]
  ]
};

3.添加es转换

//  config/index.js
h5: {
    webpackChain(chain, webpack) {
      chain.merge({
        module: {
          rule: {
            myloader: {
              test: /\.js$/,
              use: [
                {
                  loader: "babel-loader",
                  options: {}
                }
              ]
            }
          }
        }
      });
    },
    publicPath: process.env.NODE_ENV === "development" ? "/" : "./",
   }