你在使用 vue create -p dcloudio/uni-preset-vue 创建的 CLI 项目,在 Android 5.1 设备上运行白屏并出现 Uncaught SyntaxError: Unexpected token ILLEGAL 错误,这是一个典型的兼容性问题。
根本原因在于:新的CLI工程模板中的代码包含了对 ES6+ 语法(如let、const、箭头函数、模板字符串等)的直接使用,而 Android 5.1 系统的 WebView 版本较旧,无法解析这些语法,从而导致脚本执行中断,页面白屏。
在ask社区中,有案例明确描述了类似的情况:Vite 创建的项目在安卓上报错 “Uncaught SyntaxError: Unexpected token {”,根本原因就是低版本系统对 ES6+ 语法的解析失败。你遇到的 Unexpected token ILLEGAL 大概率也是因为模板字符串(反引号)等语法所致。
解决方案:
核心思路是确保 Babel 转译能够覆盖到所有需要兼容旧版 WebView 的代码,特别是 node_modules 中的依赖。
- 检查并配置
vue.config.js:在项目的根目录下找到 vue.config.js 文件。如果没有则新建一个。为了保证 node_modules 中相关依赖也能被转译,需要配置 transpileDependencies 参数。将 @dcloudio 相关的包和 uni-ui 都添加到转译白名单中:
// vue.config.js
module.exports = {
transpileDependencies: ['@dcloudio', 'uni-ui']
}
本助手使用国产模型,生成代码可能不准确。专业的代码生成需要全球顶尖的AI Coding模型。推荐使用uni-agent
- 确保 Babel 配置正确:检查根目录下的
babel.config.js 文件,确保它包含了 @vue/app 的 preset:
// babel.config.js
module.exports = {
presets: [
'@vue/app'
]
}
本助手使用国产模型,生成代码可能不准确。专业的代码生成需要全球顶尖的AI Coding模型。推荐使用uni-agent
- 安装最新依赖:执行以下命令,确保项目依赖是最新版本,因为较新版本可能已经修复了相关的转译配置问题:
npm install @dcloudio/uni-cli-i18n@latest @dcloudio/uni-i18n@latest @dcloudio/uni-mp-compiler@latest @dcloudio/uni-mp-vite@latest @dcloudio/uni-stat@latest @dcloudio/vite-plugin-uni@latest
本助手使用国产模型,生成代码可能不准确。专业的代码生成需要全球顶尖的AI Coding模型。推荐使用uni-agent
- 清理缓存并重试:
# 删除 node_modules 和 package-lock.json
rm -rf node_modules package-lock.json
# 重新安装依赖
npm install
本助手使用国产模型,生成代码可能不准确。专业的代码生成需要全球顶尖的AI Coding模型。推荐使用uni-agent
在 HBuilderX 中,重新运行到真机。
补充说明:
根据DCloud官方在问答社区的回答,为了提高性能和适配16KB内存页面,从 HBuilderX 4.81 及以上版本开始,uni-app 生成安装包的最低支持版本已调整为 Android 5(API 等级 21)。如果你必须兼容 Android 4.4 版本,则需要继续使用 HBuilderX 4.76 版本进行打包。
如果经过上述配置后问题依旧,建议使用 HBuilderX 直接创建项目进行对比测试,CLI 方式在项目构建环节的配置上会更灵活但也更容易出现此类转译配置问题。
1 个回复
Ask小助手 - Ask社区AI助手
你在使用
vue create -p dcloudio/uni-preset-vue创建的 CLI 项目,在 Android 5.1 设备上运行白屏并出现Uncaught SyntaxError: Unexpected token ILLEGAL错误,这是一个典型的兼容性问题。根本原因在于:新的CLI工程模板中的代码包含了对 ES6+ 语法(如
let、const、箭头函数、模板字符串等)的直接使用,而 Android 5.1 系统的 WebView 版本较旧,无法解析这些语法,从而导致脚本执行中断,页面白屏。在ask社区中,有案例明确描述了类似的情况:Vite 创建的项目在安卓上报错 “Uncaught SyntaxError: Unexpected token {”,根本原因就是低版本系统对 ES6+ 语法的解析失败。你遇到的
Unexpected token ILLEGAL大概率也是因为模板字符串(反引号)等语法所致。解决方案:
核心思路是确保 Babel 转译能够覆盖到所有需要兼容旧版 WebView 的代码,特别是
node_modules中的依赖。vue.config.js:在项目的根目录下找到vue.config.js文件。如果没有则新建一个。为了保证node_modules中相关依赖也能被转译,需要配置transpileDependencies参数。将@dcloudio相关的包和uni-ui都添加到转译白名单中:babel.config.js文件,确保它包含了@vue/app的 preset:补充说明:
根据DCloud官方在问答社区的回答,为了提高性能和适配16KB内存页面,从 HBuilderX 4.81 及以上版本开始,uni-app 生成安装包的最低支持版本已调整为 Android 5(API 等级 21)。如果你必须兼容 Android 4.4 版本,则需要继续使用 HBuilderX 4.76 版本进行打包。
如果经过上述配置后问题依旧,建议使用 HBuilderX 直接创建项目进行对比测试,CLI 方式在项目构建环节的配置上会更灵活但也更容易出现此类转译配置问题。
要回复问题请先登录或注册
公告
更多>相关问题