解决vue

2023-08-06 05:37| 来源: 网络整理| 查看: 265

用 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

解决vue

今日新闻

推荐新闻