admin管理员组文章数量:1558078
用 Vue 开发的项目在最近两年新出的安卓手机上没问题,在三四年前的旧手机上出现白屏问题。分析一下应该是安卓系统版本的原因,目前已知的是Android 6.0 以上都 OK,6.0 以下就不行了。
低版本安卓系统内置的 webview 不支持 ES6 语法等一些新特性,所以报错。但在手机上调试不方便,受一篇文章的启发, IE 浏览器也是同样的问题,所以可以在 IE 上调试,一个调好了两个就都好了。突然发现万恶的 IE 还是有点用的…
网上的文章大部分是 Vue-cli 2.x 版本的解决方案,但 Vue-cli 3 跟之前的版本还是有很大差异的,下面是亲测有效解决步骤:
1. 安装项目编译需要的依赖
Babel 是一个工具链,主要用于将采用 ECMAScript 2015+ 语法编写的代码转换为向后兼容的 JavaScript 语法,以便能够运行在当前和旧版本的浏览器或其他环境中。下面列出的是 Babel 能做的事情:
a.语法转换
b.通过 Polyfill 方式在目标环境中添加缺失的特性(通过第三方 polyfill 模块,例如 core-js,实现)
c.源码转换 (codemods)
**@babel/core**的作用是把 js 代码分析成 ast ,方便各个插件分析语法进行相应的处理。有些新语法在低版本 js 中是不存在的,如箭头函数,rest 参数,函数默认值等,这种语言层面的不兼容只能通过将代码转为 ast,分析其语法后再转为低版本 js
**@babel/plugin-transform-runtime** 的作用是将 helper 和 polyfill 都改为从一个统一的地方引入,并且引入的对象和全局变量是完全隔离
**@babel/preset-env**在官网介绍是一款自动管理浏览器版本和babel语法转换插件映射的一款工具。其中浏览器版本管理默认使用的是browserslist,可以通过browserslist的相关配置去指定需要兼容的浏览器版本列表。 @babel/preset-env会在编译的时候自动匹配需要使用哪些plugins去转换的你代码
**babel-polyfill **Babel默认只转换新的JavaScript句法(syntax),而不转换新的API,比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局对象,以及一些定义在全局对象上的方法(比如Object.assign)都不会转码。举例来说,ES6在Array对象上新增了Array.from方法。Babel就不会转码这个方法。如果想让这个方法运行,必须使用babel-polyfill,为当前环境提供一个垫片
**babel-plugin-transform-remove-console** 插件用于打包时删除 console
npm install --save-dev @babel/core @babel/plugin-transform-runtime @babel/preset-env es6-promise babel-polyfill babel-plugin-transform-remove-console
2. 根目录下新建 .babelrc 文件
在项目根目录下新建 .babelrc 文件,跟 package.json 同级。 将以下代码复制到 .babelrc 文件中
{
"presets": ["@babel/preset-env"],
"plugins": [
"@babel/plugin-transform-runtime"
]
}
这个文件是用来设置转码的规则和插件的,里面可以对babel命令进行配置;
presets 字段是用来设定转码规则,,具体可查看官方的解释 https://babeljs.io/docs/plugins/
3.修改 babel.config.js
babel.config.js是项目范围配置,主要用于以下功能:
-
以编程方式创建配置
-
编译node_modules
babel.config.js 当前项目维度 (Project Wide)的配置文件,相当于一份全局配置,如果 babel 决定应用这个配置文件,则一定会应用到所有文件的转换。
.babelrc 相对文件(File Relative)的配置文件, babel 决定一个 js 文件应用哪些配置文件时,会执行如下策略: 如果要转换的这个 js 文件在当前项目内,则会先递归向上搜索最近的一个 .babelrc 文件(直到遇到package.json目录),将其与全局配置合并。如果这个 js 文件不在当前项目内,则只应用全局配置,忽略与这个文件相关的 .babelrc 。
这两个我更愿意将其称为全局配置 (babel.config.js) 和局部配置 (.babelrc) 便于理解一些。
babel.config.js 文件中,最上面四行是打包时删除 console 的配置,如不需要可以删除。
const plugins = [];
if (['production', 'prod'].includes(process.env.NODE_ENV)) {
plugins.push("transform-remove-console")
}
module.exports = {
presets: [
[
"@vue/app",
{
"useBuiltIns": "entry",
polyfills: [
'es6.promise',
'es6.symbol'
]
}
]
],
plugins: plugins
};
4.修改 vue.config.js
因为node_modules里的依赖默认是不会编译的,会导致es6语法在ie中的语法报错,所以需要在vue.config.js中使用transpileDependencies属性配置node_modules中指定哪些文件夹或文件需要编译
module.exports = {
transpileDependencies: ['webpack-dev-server/client'],
chainWebpack: config => {
config.entry.app = ['babel-polyfill', './src/main.js'];
}
}
5. 修改 main.js 文件
在main.js 入口文件中调用polyfill()修补全局环境
import '@babel/polyfill';
import Es6Promise from 'es6-promise'
Es6Promise.polyfill()
其实白屏的主要原因是因为vue-cli项目内或node_modules中的ES6语法没有转换成ES5,导致浏览器无法正确识别,以上工作都是进行语法转换配置。
版权声明:本文标题:解决vue-cli3.0项目在低版本安卓系统和IE中白屏问题详细记录 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/dongtai/1727375230a1111626.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论