SCRIPT1003：在 IE ~ Vue.js ~ MBootstrap 上应为“:”

Question

我有一个简单的 Vue.js 应用程序，它可以在 IE 之外的其他浏览器上完美运行，它显示一个带有错误的空白页面SCRIPT1003: Expected ':'。我添加了一个vue.config.js看起来像这样的文件：

module.exports = {

  transpileDependencies: ["bootstrap-css-only", "mdbvue"]

};

我的.babelrc文件是从官方项目起始页中获取的默认文件，这是：

{

  "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";

两者都没有改变任何东西，错误和行为是相同的。这里提到了我仍然想到的唯一一件事来解决这个问题，即export default我对组件使用以下语法：

components: {

  mdbContainer,

  mdbRow,

  mdbCol,

  mdbCard,

  mdbCardBody,

  mdbInput,

  mdbBtn,

  mdbIcon,

  mdbModalFooter,

  mdbView

}

Edit2：但是如果我删除这一行，那么我所有来自 MBootstrap 的 UI 元素都将消失。有没有其他方法可以使用它？我只想使用 polyfills。

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

module.exports = {

  presets: [["@vue/app", { useBuiltIns: "entry" }]]

};

有什么我想念的吗？我所理解的vue.config.js文件不必在任何地方导入，因为它vue.config.js是一个可选的配置文件，它将由@vue/cli-service. 以下是我的问题：

任何想法可能是错误的？

我得babel.config.js 和 .babelrc或者只有其中一个？

babel.config.js文件是否自动检测到vue.config.js？

[编辑] 也许应该更改 webpack 配置中的某些内容？

Vue CLI 版本：

$ vue --version

3.11.0

Answer 1

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

Answer 2

问题是 IE11 不支持速记属性表示法，但您在components列表中使用了它。您.babelrc没有设置为确保生成的代码可以在 IE11 上运行。您需要查看浏览器列表文档以微调您的browsers设置，但例如添加IE 11到其中将确保转换后的代码具有在 IE11 上运行所需的所有转换。请注意，IE11 基本上不支持 ES2015+ 中的任何内容。（它有const一个损坏的版本let，但基本上就是这样。）所以这样做将有效地将您的所有代码转换为 ES5 级别。您可能希望为 IE 和其他更现代的浏览器提供不同的包。