uni-app 打包h5内有es6语法未编译 部分低端手机运行报错

uni-app 打包h5内有es6语法未编译 部分低端手机运行报错

操作步骤:

  • 运行打包发布h5 网站-h5手机版

预期结果:

  • 兼容版本的js

实际结果:

  • 编译后的js内有es6语法

bug描述:

  • uni打包h5内有es6语法未编译,部分低端手机运行报错
信息类别 信息内容
产品分类 uniapp/H5
PC开发环境 Windows
PC开发环境版本 window10
HBuilderX类型 正式
HBuilderX版本 3.1.2
浏览器平台 手机系统浏览器
浏览器版本 安卓系统 5.1
项目创建方式 HBuilderX

Image Image Image


更多关于uni-app 打包h5内有es6语法未编译 部分低端手机运行报错的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app 打包h5内有es6语法未编译 部分低端手机运行报错的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个典型的 ES6 语法兼容性问题。在 uni-app 打包 H5 时,默认的 babel 配置可能未完全转译某些 ES6+ 语法,导致低版本安卓系统浏览器报错。

解决方案:

  1. 检查 babel 配置:在项目根目录创建或修改 babel.config.js,确保包含必要的 polyfill 和转译规则:
module.exports = {
  presets: [
    ['@vue/app', {
      useBuiltIns: 'entry'
    }]
  ],
  plugins: []
}
  1. 添加 polyfill:在 main.js 首行引入:
import '@babel/polyfill'
  1. 配置 manifest.json:在 H5 配置中添加:
{
  "h5": {
    "devServer": {},
    "publicPath": "/",
    "template": "public/index.html",
    "postcss": {},
    "babel": {
      "presets": ["@vue/app"],
      "plugins": []
    }
  }
}
  1. 检查依赖兼容性:第三方库可能包含未转译的 ES6 代码,在 vue.config.js 中配置 transpileDependencies:
module.exports = {
  transpileDependencies: ['your-dependency-name']
}
回到顶部