Question

我有一个简单的Vue.js应用程序，该应用程序在IE之外的其他浏览器上均能完美运行，该应用程序显示空白页面，错误为SCRIPT1003: Expected ':'。我添加了一个vue.config.js文件，如下所示：

module.exports = {
  transpileDependencies: ["bootstrap-css-only", "mdbvue"]
};

我的.babelrc文件是来自官方项目starting page的默认文件，它是：

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

在我的main.js文件中，我尝试了两种方法：

import "core-js/stable";
import "regenerator-runtime/runtime";

和

import "@babel/polyfill";

两者均未更改任何内容，并且错误和行为相同。我仍然想解决这个问题的唯一一件事是提到here，即在export default中，我对组件使用以下语法：

components: {
  mdbContainer,
  mdbRow,
  mdbCol,
  mdbCard,
  mdbCardBody,
  mdbInput,
  mdbBtn,
  mdbIcon,
  mdbModalFooter,
  mdbView
}

Edit2：但是，如果我放下这行，那么MDBootstrap中的所有UI元素都将消失。还有其他使用方式吗？我只想使用polyfills。

我试图创建babel.config.js文件，但也没有帮助。该文件中的逻辑是这样的：

module.exports = {
  presets: [["@vue/app", { useBuiltIns: "entry" }]]
};

我有什么想念的吗？我了解的vue.config.js文件不必导入任何地方，因为vue.config.js is an optional config file that will be automatically loaded by @vue/cli-service。这是我的问题：

有什么主意吗？
我要babel.config.js 和 .babelrc还是只有其中之一？
是否像babel.config.js一样自动检测到vue.config.js文件？
[编辑]也许应该更改webpack配置中的某些内容？

Vue CLI版本：

$ vue --version
3.11.0

Answer 1

问题在于IE11不支持速记属性表示法，但是您在components列表中使用了它。未设置您的.babelrc来确保生成的代码可以在IE11上运行。

您将需要查看the browserlist documentation来微调您的browsers设置，但是例如向其中添加IE 11将确保转译的代码具有运行所需的所有转换在IE11上。

请注意，IE11在ES2015 +中基本上不支持任何功能。（它具有const和let的损坏版本，但仅此而已。）因此，这样做将有效地将所有代码转换为ES5级别。您可能想为IE和其他更现代的浏览器提供不同的捆绑软件。

Answer 2

我有一个类似的问题。我使用vue-cli 4重新创建了项目，并保留了所有默认值。我没有在babel中引用core-js或main.js。我查看了IE中的控制台错误，以查看哪个库导致了脚本错误，（我们称它为some-imported-lib）。然后，我按如下方式在vue.config.js中添加了该库

transpileDependencies:['some-imported-lib']

SCRIPT1003：在IE〜Vue.js〜MDBootstrap上应为'：'

2 个答案: