vue项目浏览器兼容问题实战总结

一、适用范围

Vue CLI 4.x 生成的项目

二、操作步骤

2.1 指定浏览器兼容范围

package.json 文件里的 browserslist 字段 (或一个单独的 .browserslistrc 文件)，指定了项目的目标浏览器的范围。这个值会被 @babel/preset-env 和 Autoprefixer 用来确定需要转译的 JavaScript 特性和需要添加的 CSS 浏览器前缀。

arduino 复制代码

// .browserslistrc
> 1%
last 2 versions 
chrome >= 73 // 按需配置

或者

json 复制代码

// package.json
{
 "browserslist": [
    "> 1%",
    "last 2 versions",
    "chrome >= 73"
  ],  
}

配置示例：

chrome >= 61 : 版本高于61的谷歌浏览器。
ie 6-8 : 选择一个浏览器的版本范围。
Firefox > 20 : 版本高于20的所有火狐浏览器版本。>=,<,<=同样适用。

2.2 配置需要转译的依赖

默认情况下 babel-loader 会忽略所有 node_modules 中的文件。你可以启用本选项，以避免出现未转译的第三方依赖。

该配置选项用于转译 node_modules中插件，使符合浏览器版本兼容性要求。如控制台报错某某语法不支持，可以查看详细错误信息是哪个插件报的，并把它添加进该配置。

java 复制代码

 // vue.config.js 
 module.exports = {
   transpileDependencies: ['hzwq-routing-authority'],
 }

2.3 按需添加指定的polyfill

正常来讲我们只需要配置babel插件的浏览器兼容目标，vue/cli-plugin-babel或者@vitejs/plugin-legacy会自动帮我们添加符合目标的 polyfill垫片。

但是确实存在自动添加失效的情况，我们可以通过下面的方式，指定添加polyfill。

lua 复制代码

// babel.config.js
module.exports = {
  presets: [['@vue/cli-plugin-babel/preset', {
    polyfills: [
      'es.string.replace-all'
    ]
  }]]
}

polyfills的值为core.js提供的polyfill模块名。

如果corejs文档搜不到、没有提供报错语法的支持，那么建议语法+polyfill的关键词网络搜索看看有没有已有的轮子，自己手动引入。

polyfills配置选项说明：vue-cli/packages/@vue/babel-preset-app at dev · vuejs/vue-cli · GitHub
core.js的polyfill列表：GitHub - zloirock/core-js: Standard Library

三、经验总结

3.1 概念名称

Polyfills

polyfill 就是一个 JavaScript 函数或脚本，它为那些尚未实现某个标准的浏览器提供了一种模拟实现的方法。

3.2 经验分享

在解决兼容性问题时，经常会遇到白屏但控制台没有报错、报错了但代码指向压缩混淆后的代码，这种让我们无从下手的情况。这里分享一些个人解决问题的思路。

网络搜索或AI问询

复制报错信息，网络搜索或AI问询。stackoverflow和官方issue中的信息相对靠谱很多
如果是压缩混淆的代码，打开sourcemap或者关闭压缩
通过代码注释不断缩小目标范围

通过注释或者新建干净的工程，不断缩小问题出现的范围，得出最小复现条件
添加try catch，能帮助我们看到更具体的错误信息

四、问题记录

4.1 Function.prototype.toString called on incompatible objec

白屏，控制台报错TypeError: Function.prototype.toString called on incompatible object

最小复现问题代码

javascript 复制代码

function wrap(source) {return(new Proxy(source, {}))}
wrap(function() { }).toString()

解决方案

函数代理.toString()错误-腾讯云开发者社区-腾讯云

4.2 n.v4(...).replaceAll is not a function

控制台报错TypeError: n.v4(...).replaceAll is not a function

解决方案：

原因是有个第三方依赖使用了replaceAll方法，但core-js未能自动添加该垫片，咱们通过配置指定添加。