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

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 还是只有其中之一？
是否像 vue.config.js 一样自动检测到 babel.config.js 文件？
[编辑] 也许应该更改 webpack 配置中的某些内容？

Vue CLI 版本：

$ vue --version
3.11.0

Answer 1

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

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

请注意，IE11 基本上不支持 ES2015+ 中的任何内容。（它有 const 和 let 的损坏版本，但基本上就是这样。）所以这样做会有效地将所有代码转换为 ES5 级别。您可能希望为 IE 和其他更现代的浏览器提供不同的捆绑包。

Answer 2

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

transpileDependencies:['some-imported-lib']

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

SCRIPT1003: Expected ':' on IE ~ Vue.js ~ MDBootstrap

javascript

vue.js

webpack

babeljs

mdbootstrap