SCRIPT1003：在 IE ~ Vue.js ~ MDBootstrap 上預期為 ':'

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文件中，我嘗試了 2 種方法：

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：但是如果我刪除這些行，那么我所有來自 MDBootstrap 的 UI 元素都將消失。 有沒有其他方法可以使用它？ 我只想使用 polyfills。

我試圖創建babel.config.js文件，但也沒有幫助。 這個文件中的邏輯是這樣的：

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

有什么我想念的嗎？ 我所理解的vue.config.js文件不必在任何地方導入，因為vue.config.js是一個可選配置文件，將由@vue/cli-service自動加載。 以下是我的問題：

1. 有什么想法可能是錯的嗎？
2. 我應該有babel.config.js和.babelrc還是只有其中之一？
3. 是否像vue.config.js一樣自動檢測到babel.config.js文件？
4. [編輯] 也許應該更改 webpack 配置中的某些內容？

Vue CLI 版本：

$ vue --version
3.11.0

Answer 1

我有一個類似的問題。 我使用vue-cli 4重新創建了項目，並保留了所有默認值。我沒有在main.js中引用babel或core-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 和其他更現代的瀏覽器提供不同的捆綁包。