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

时间:2019-05-22 14:59:27

标签: vuejs2 internet-explorer-11 vue-cli-3

我的应用程序在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

1 个答案:

答案 0 :(得分:1)

上次不得不处理此类错误时,我想到了以下解决方案:

  

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。