記一次vue3在ie11中空白問題的探索

胡聊前端發表於2020-12-17

我並沒有解決這個問題,但說不定能給你提供一些思路…

我的專案使用vue-cli進行初始化的。看一下package.json的依賴專案:

  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^3.0.0"
  },

其實並不止這兩個依賴,vue3本身也依賴於別的專案:

  "dependencies": {
    "@vue/shared": "3.0.4",
    "@vue/compiler-dom": "3.0.4",
    "@vue/runtime-dom": "3.0.4"
  },

vue3本身打包出來的檔案,也就是你npm install的檔案引入的vue3的依賴,包含了函式引數預設值的語法。這個基本是你在ie11開啟時候第一個錯。

在這裡插入圖片描述
對於這個錯誤,是因為babel預設是不會編譯node_moduels裡的檔案的,所以需要配置如下:
在這裡插入圖片描述
值得注意的是,之所以寫兩個,因為如上文所說,專案會引用node_modules裡面vue與@vue兩個資料夾中的檔案。

但這樣改了之後仍舊會報錯:
在這裡插入圖片描述
也就是下面這個同樣的錯誤

Uncaught TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them

網上的解決辦法是安裝 @babel/plugin-transform-modules-commonjs @babel/plugin-transform-strict-mode 兩個外掛,然後在babel的配置檔案中寫入:

"plugins": [
      ["@babel/plugin-transform-modules-commonjs", { "strictMode": false }]
    ]

然後我這裡並沒有作用,之後我並沒找到其他的解決辦法。

最後,vue3本身是不支援ie11的。但他是有計劃去支援的。只不過我看最近的提交一直是修復bug,估計解決相容性問題的優先順序太低了, 下面是原文:

v3.0.0 One Piece release notes: Migration and IE11 Support: We have pushed back the migration build (v3 build with v2 compatible behavior + migration warnings) and the IE11 build due to time constraints, and are aiming to focus on them in Q4 2020. Therefore, users planning to migrate an existing v2 app or require IE11 support should be aware of these limitations at this time

如果哪位大俠知道如何解決,還望不吝賜教。

相關文章