Vue2 Cli4 项目低版本浏览器ES6语法报错处理

Vue2 Cli4 项目低版本浏览器ES6语法报错处理

---

在低版本浏览器中你可能会遇到这样的错误SyntaxError: Unexpected token ‘...‘或者SyntaxError: Invalid regular expression flags之类的，这些错误可能就是因为项目代码或依赖中使用了ES6的语法，而低版本的浏览器是无法解析ES6语法的，因此会出现这样的错误。对于项目代码中的ES6语法问题，我们需要到babel.config中进行配置：

// babel.config.js
module.exports = {
  ...
  presets: [
    [
      // Vue CLI 提供的默认 preset
      // preset(预设配置)：将特定的 ECMAScript 版本（通常是较新的版本）的代码转换为另一种目标版本，以确保代码在目标环境中的兼容性
      '@vue/cli-plugin-babel/preset',
      {
        // 这个选项告诉 Babel 在代码中遇到需要 polyfill 的地方，根据 entry 配置按需引入 polyfill。
        // polyfill 是一些代码片段，用于为不支持某些新特性的旧浏览器提供相应的支持。
        useBuiltIns: "entry",
        // targets: 指定了项目的目标浏览器环境和版本。
        // 如果 targets 不指定，Babel 将默认使用全局环境，并且尽量生成与当前 Node.js 版本相匹配的代码。
        // 这意味着 Babel 将不会为特定的浏览器版本进行优化，而是生成一个在当前环境中运行的代码。
        targets: {
          ie: "11",
          chrome: "49",
        }
      }
    ]
  ]
}

除了项目代码以外，有些依赖也可能是使用了ES6语法，那这些依赖就需要在vue.config中指明需要通过babel进行转义。

module.exports = {
  ...
  // 配置需要通过Babel进行转译的依赖模块（dependencies）
  // 如果项目依赖某些模块，而这些模块的代码并不符合当前Babel配置
  // 那可能需要使用transpileDependencies来告诉Vue CLI对这些模块进行额外的转译，以确保它们能够在项目中正常工作。
  transpileDependencies:['element-ui','highlight.js']
}