Nuxt 1.4项目在Safari 9中出现const语法错误求解决方案

Hey, I’ve dealt with this exact ES6 compatibility issue in Nuxt 1.4 targeting older browsers like Safari 9 before. The problem is that Safari 9 has limited support for ES6 syntax (especially const in strict mode), and your current Babel/webpack setup isn’t fully translating all ES6 code down to ES5. Here’s a step-by-step solution tailored to your project:

1. Upgrade Your Babel Preset for Targeted Transpilation #

Your package.json uses the older es2015 preset, which isn’t as flexible as babel-preset-env—it lets you specify exact browser targets and automatically adjusts transpilation rules. First, install it:

npm install babel-preset-env --save-dev

Then update your Babel config in package.json to target Safari 9 and other legacy browsers:

"babel": {
  "presets": [
    [
      "env",
      {
        "targets": {
          "browsers": [
            "Safari >= 9",
            "Chrome >= 49",
            "IE >= 11"
          ]
        },
        "useBuiltIns": "entry",
        "modules": false
      }
    ],
    "es2015"
  ]
}

2. Extend Nuxt’s Webpack Config to Transpile Dependencies #

Many third-party packages (like vue-carousel or vue2-google-maps) ship untranspiled ES6 code, which breaks Safari 9. We need to tell Babel to process these dependencies too. Update your nuxt.config.js build section:

module.exports = {
  /* ** Build configuration */
  build: {
    /* ** Run ESLint on save */
    extend(config, { isDev, isClient }) {
      if (isDev && isClient) {
        config.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules)/
        })
      }
      // Add rule to transpile specific node_modules packages
      config.module.rules.push({
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: file => {
          // Exclude most node_modules, but transpile the ones that need it
          return /node_modules/.test(file) && !/vue-carousel|vue2-google-maps|vee-validate/.test(file)
        }
      })
    },
    vendor: ['babel-polyfill'],
    // Configure Babel directly in Nuxt
    babel: {
      presets: ['env', 'es2015'],
      plugins: ['transform-runtime']
    }
  }
}

3. Ensure Babel Polyfill Loads Early #

babel-polyfill adds missing ES6 APIs to older browsers. Let’s make sure it loads before your app code. Create a plugins/polyfill.js file:

import 'babel-polyfill'

Then register this plugin in nuxt.config.js to load it server-side and client-side:

module.exports = {
  plugins: [
    { src: '~/plugins/polyfill.js', ssr: true }
  ],
  // Keep your other config options...
}

4. Clean and Rebuild Your Project #

Old build artifacts can cause issues, so let’s start fresh:

rm -rf node_modules .nuxt
npm install
npm run build
npm run start

Now test your site in Safari 9—the const syntax error should be gone.

Why this works: Safari 9 doesn’t handle const properly in strict mode, and many dependencies don’t transpile their code for legacy browsers. By using babel-preset-env to target exact browsers, transpiling problematic dependencies, and loading babel-polyfill to fill missing APIs, you’re ensuring all ES6 code gets converted to ES5 that Safari 9 understands.

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