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 --version3.11.0

Answer 1

我有一个类似的问题。我使用重新创建了项目vue-cli 4并保留了所有默认值。我没有引用babel或core-js在我的main.js. 我查看了 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 和其他更现代的浏览器提供不同的包。