Vue.js应用在IE浏览器中出现SCRIPT1002语法错误的解决咨询

Hey there, let’s work through this IE SCRIPT1002 syntax error—you’re spot-on that it’s almost certainly a Babel transpilation gap since your app runs fine in other browsers. Here’s a step-by-step guide to resolve it:

1. Validate Your Babel Core Configuration #

First, double-check your Babel setup to ensure it’s targeting IE properly. If you’re using @babel/preset-env, your config file (babel.config.js or .babelrc) should explicitly include IE in its targets, along with settings to auto-inject polyfills:

module.exports = {
  presets: [
    ['@babel/preset-env', {
      targets: {
        ie: '11', // Target IE 11 explicitly
        chrome: '58',
        firefox: '54'
      },
      useBuiltIns: 'usage', // Auto-inject polyfills where needed
      corejs: 3 // Use CoreJS v3 (v2 is deprecated)
    }]
  ]
}

This tells Babel to transpile all modern syntax (like const, arrow functions, template strings) into code IE 11 can understand, and add missing polyfills for APIs like Promise or Array.prototype.includes.

2. Configure Vue CLI for IE Compatibility (If Applicable) #

If you’re using Vue CLI, there are two key settings to tweak in vue.config.js:

• Transpile untranspiled dependencies: Many third-party packages aren’t pre-transpiled for IE. Add them to transpileDependencies to ensure Babel processes them:

  module.exports = {
    transpileDependencies: ['axios', 'lodash', 'your-untranspiled-package']
    // Or use `transpileDependencies: true` to transpile all node_modules (slower build)
  }
  

• Adjust webpack rules (if needed): Use chainWebpack to force Babel to process specific files or packages that might be slipping through:

  module.exports = {
    chainWebpack: config => {
      config.module
        .rule('js')
        .include.add(/node_modules\/(some-package-that-needs-transpiling)/)
        .end()
        .use('babel-loader')
        .loader('babel-loader')
    }
  }
  

3. Manually Add Critical Polyfills #

Even with useBuiltIns: 'usage', some edge-case polyfills might not be auto-injected. Add these imports at the very top of your main.js file to cover all bases:

import 'core-js/stable'
import 'regenerator-runtime/runtime'

These ensure IE has access to all modern JavaScript features and async/await support.

4. Hunt for Un-Transpiled Syntax in Your Code #

Check your own code for any modern syntax that might have skipped transpilation. Common culprits include:

• Arrow functions in raw JS files (Vue templates handle their own event handlers, but standalone JS might slip through)
• const/let that somehow wasn’t converted to var
• Destructuring assignment or spread operators
• Template strings

If you find any, confirm your Babel config is applied to the files containing this code (e.g., make sure webpack is using babel-loader for all .js files).

5. Test the Exact Error Line #

The console points to an eval block in app.js—track down the original code that maps to this line. It’s likely a piece of modern syntax that wasn’t transpiled. Check if that file is included in Babel’s processing pipeline (e.g., not excluded in webpack’s exclude rule).

Final Checks #

• Clear IE’s cache completely—IE loves to hold onto old, untranspiled code.
• Test with a production build (npm run build)—dev builds sometimes have different transpilation settings than production.

Once you’ve worked through these steps, your Vue.js app should run smoothly in IE 11 without the SCRIPT1002 error.

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