IE11 + Vue-Cli + Webpack + Babel - SCRIPT1003 错误答案

【问题标题】：IE11 + Vue-Cli + Webpack + Babel - SCRIPT1003 ErrorIE11 + Vue-Cli + Webpack + Babel - SCRIPT1003 错误
【发布时间】：2018-01-30 10:34:34
【问题描述】：

我在 IE11 中有 SCRIPT1003: Expected ':' 错误。我已经通过 vue-cli 工具安装了 vuejs。在我将 vuex 库添加到 package.json 之前它一直有效。我的 package.json 依赖项如下：

"dependencies": {
    "axios": "^0.16.2",
    "babel-polyfill": "^6.26.0",
    "lodash": "^4.17.4",
    "rxjs": "^5.4.2",
    "vue": "^2.3.3",
    "vue-i18n": "^7.1.0",
    "vue-router": "^2.6.0",
    "vue-rx": "^3.3.0",
    "vuetify": "^0.14.11",
    "vuex": "^2.3.1",
    "vuex-persistedstate": "^2.0.0"
  }

正如许多其他帮助论坛所建议的那样，我尝试使用 babel polyfill。我的 .babelrc 文件是这样的：

{
  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }
    }],
    "stage-2"
  ],
  "plugins": ["transform-runtime"],
  "env": {
    "test": {
      "presets": ["env", "stage-2"],
      "plugins": ["istanbul"]
    }
  }
}

我在 build/webpack.base.conf.js 的入口点中包含了 polyfill：

entry: {
  app: ['babel-polyfill', './src/main.js']
},

不幸的是，在这一切之后，我仍然遇到同样的错误。你能帮我如何让它在 IE11 中工作吗？

提前谢谢你。

最好的问候，

戈兰

【问题讨论】：

标签： javascript internet-explorer webpack vue.js babeljs

【解决方案1】：

您收到此错误很可能是因为您在代码中的某处编写了带有shorthand property 的对象字面量。

最可能的罪魁祸首是在主 Vue 实例的构造函数中传递 Vuex store：

new Vue({
  el: '#app',
  store,
  // ...
});

IE11 不支持速记属性，因此它让您知道它期待定义属性值所需的 :：

new Vue({
  el: '#app',
  store: store,
  // ...
})

【讨论】：

其实这是babel转译和修复的。请注意此线程的正确答案：forum.vuejs.org/t/ie11-vue-cli-webpack-babel-script1003-error/…
看起来删除速记属性修复了错误，对吧？
不，我在项目组件的其他地方有速记语法，问题出在 vCardMedia 内部。例如，“商店”的添加方式与您的第一个示例完全相同，现在一旦我删除 vCardMedia，它就可以正常工作了。
是的，那可能是您的 babel 配置或 vue-loader 的问题。我非常有信心这是根本问题。 components: { vCardMedia: vCardMedia } 适合你吗？
建议在已经使用 babel 转译代码时停止使用对象简写实际上并没有解决真正的问题。 babel 的重点是让你可以使用 IE11 不支持的 es6+ 功能。

【解决方案2】：

从 Vue.js 论坛得到答案：

https://forum.vuejs.org/t/ie11-vue-cli-webpack-babel-script1003-error/16257/6

问题是在组件中添加了 vCardMedia：

components : {
 vCardMedia
}

一旦我删除了它，所有的东西都可以与 babel 一起使用。仍然不确定为什么组件会破坏它...

【讨论】：

这不是一个很好的答案 :( 如果您想知道它为什么坏了以及如何在不移除任何组件的情况下修复它，请参见下文
这不是一个答案，它仍然是一个错误。如果修复某些问题是删除该功能，那将是非常愚蠢的。