VueJS项目npm run serve在Safari/IE无法运行，求排查方案

一、先修正.browserslistrc的配置格式 #

你的当前配置写在一行，部分工具（比如babel-preset-env）可能无法正确解析多规则的单行写法，建议改成每行一个规则的标准格式：

> 1%
last 2 versions
ie 11
Safari 9

修改后重启npm run serve，确保工具能正确识别目标浏览器范围。

二、排查IE11模拟时的语法错误（SyntaxError: Unexpected token '{' in const declaration） #

这个错误大概率是ES6解构赋值语法未被转译导致的——IE11完全不支持对象/数组解构（比如const { name } = obj这种写法），即使它支持基础的const声明。你需要确保以下几点：

• 确认Babel配置正确：如果是Vue项目，检查babel.config.js（或.babelrc）是否使用了@babel/preset-env并关联了browserslist：

  module.exports = {
    presets: [
      ['@babel/preset-env', {
        useBuiltIns: 'usage',
        corejs: 3 // 或你安装的core-js版本
      }]
    ]
  }
  

• 开启依赖转译：如果项目中使用的第三方依赖包含未转译的ES6代码，开发环境下需要让webpack转译这些依赖。以Vue CLI为例，在vue.config.js中添加：

  module.exports = {
    transpileDependencies: ['依赖包名'] // 比如如果是某些UI库，就填对应的包名，不确定的话可以先设为true测试
  }
  

• 检查是否遗漏polyfill：IE11需要额外的polyfill来支持ES6+特性，确保core-js已安装（npm install core-js@3），并且Babel的useBuiltIns配置正确，会自动按需引入polyfill。

三、修复Safari 9无法正常运行的问题 #

Safari 9对ES6特性的支持有限（比如不支持箭头函数、Promise的某些特性），需要做以下检查：

• 确认polyfill覆盖完整：除了Babel转译语法，还需要polyfill补充缺失的API。比如Safari 9不支持Promise.finally，需要core-js提供的polyfill。确保useBuiltIns: 'usage'已开启，这样Babel会根据目标浏览器自动引入所需的polyfill。
• 检查CSS兼容性：Safari 9对某些CSS特性（比如flexbox的旧语法、CSS Grid）支持不完善，排查页面样式是否使用了这些特性，必要时添加前缀或降级方案。
• 禁用开发环境的ES6+特性：有些构建工具在开发环境会默认启用一些ES6+语法以提升构建速度，比如Vue CLI的开发环境可能默认不转译箭头函数。可以强制让开发环境也按照browserslist配置转译，修改vue.config.js：

  module.exports = {
    configureWebpack: {
      module: {
        rules: [
          {
            test: /\.js$/,
            exclude: /node_modules/,
            use: {
              loader: 'babel-loader'
            }
          }
        ]
      }
    }
  }
  

四、验证配置生效的小技巧 #

可以运行npx browserslist命令，在项目根目录执行，查看当前配置对应的目标浏览器列表，确认ie 11和Safari 9是否在列表中，以此验证browserslist配置是否被正确识别。

内容的提问来源于stack exchange，提问作者Ayudh