时间戳

首页 > 解决方案 > 带有 Vue-Cli 项目的 IE11：Script1002：语法错误

vuejs2 - 带有 Vue-Cli 项目的 IE11：Script1002：语法错误

问题描述

我的应用在 Chrome/Firefox/Edge 中运行良好，但 IE11 给了我一些问题。在我的本地主机上测试应用程序时，我在控制台的 IE11 中收到以下错误：

SCRIPT1002: Syntax error
app.js (49143, 1)

当我点击上面的代码时，它会跳转到我的这部分代码作为可能的错误区域：

"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "default", function() { return Config; });
class Config { <---this is line 49143

    constructor() {
    this.config = {}
        for(var i = 0; i < arguments.length; i++) {
      Object.assign(this.config, arguments[i])
        }
    }

我猜 IE11 在 ES6 或其他方面有问题。我的项目没有为 IE11 正确配置吗？

我的 package.json：

{
  "name": "test",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build --report --modern",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^1.2.18",
    "@fortawesome/free-solid-svg-icons": "^5.8.2",
    "@fortawesome/vue-fontawesome": "^0.1.6",
    "animate.css": "^3.7.0",
    "axios": "^0.18.0",
    "bootstrap": "^4.2.1",
    "bootstrap-vue": "^2.0.0-rc.20",
    "jquery": "^3.4.1",
    "jso": "^4.1.1",
    "vue": "^2.6.10",
    "vue-matomo": "^0.6.0",
    "vue-popperjs": "^1.6.1",
    "vue-router": "^3.0.6"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.7.0",
    "@vue/cli-plugin-eslint": "^3.7.0",
    "@vue/cli-service": "^3.7.0",
    "@vue/eslint-config-prettier": "^4.0.1",
    "babel-eslint": "^10.0.1",
    "eslint": "^5.16.0",
    "eslint-plugin-vue": "^5.2.2",
    "node-sass": "^4.12.0",
    "sass-loader": "^7.1.0",
    "vue-template-compiler": "^2.6.10"
  }
}

Babel.config.js

module.exports = {
  presets: ['@vue/app']
}

.browserslistrc

> 1%
last 2 versions
not ie <= 8

感谢您提供的任何提示！

更新：可能是 babel-transpiler 问题？

这是我的演示代码。如您所见，在 IE11 中不起作用： https ://codesandbox.io/embed/bootstrapvue-table-assigness-and-checkbox-final-h5vst

标签： vuejs2internet-explorer-11vue-cli-3

解决方案

上次我不得不处理这样的错误时，我得出了以下解决方案：

babel.config.js


module.exports = function (api) {
  const config = {
    "presets": [
      ["@babel/env", {
        "targets": {
          "browsers": [
            "last 4 versions",
            "IE 11"
          ]
        }
      }],
      // "@babel/stage-0"
    ],
    plugins: [
      // Stage 0
      "@babel/plugin-proposal-function-bind",

      // Stage 1
      "@babel/plugin-proposal-export-default-from",
      "@babel/plugin-proposal-logical-assignment-operators",
      ["@babel/plugin-proposal-optional-chaining", {"loose": false}],
      ["@babel/plugin-proposal-pipeline-operator", {"proposal": "minimal"}],
      ["@babel/plugin-proposal-nullish-coalescing-operator", {"loose": false}],
      "@babel/plugin-proposal-do-expressions",

      // Stage 2
      ["@babel/plugin-proposal-decorators", {"legacy": true}],
      "@babel/plugin-proposal-function-sent",
      "@babel/plugin-proposal-export-namespace-from",
      "@babel/plugin-proposal-numeric-separator",
      "@babel/plugin-proposal-throw-expressions",

      // Stage 3
      "@babel/plugin-syntax-dynamic-import",
      "@babel/plugin-syntax-import-meta",
      ["@babel/plugin-proposal-class-properties", {"loose": false}],
      "@babel/plugin-proposal-json-strings",
      ["transform-es2015-template-literals", {
        // "loose": true,
        "spec": true
      }],
      ["@babel/plugin-transform-runtime", {
        "helpers": false,
        "regenerator": true
      }]
    ],
  };
  return config;
};

ofc，所有这些 babel 插件都应该作为 devDependencies 安装。

推荐阅读