Vue CLI 3 配置兼容IE10

Vue CLI 3 配置兼容IE10

最近作了一個基於Vue的項目，須要兼容IE瀏覽器，目前實現了打包後能夠在IE10以上運行，可是還不支持在運行時兼容IE10及以上。

安裝依賴

yarn add --dev @babel/polyfill 

在入口文件 main.js 引入依賴

import '@babel/polyfill';

修改 babel.config.js

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

修改 .browserslistrc

> 1%
last 2 versions
not ie <= 10

修改 vue.config.js

默認狀況下 babel-loader 會忽略全部 node_modules 中的文件。若是你想要經過 Babel 顯式轉譯一個依賴，能夠在這個選項中列出來。

module.exports = {
  transpileDependencies: []
}

詳細說明可參見官方文檔https://cli.vuejs.org/zh/conf...

我在這裏遇到一個問題，有的依賴不只須要添加它自身到 transpileDependencies 中，還須要添加它的某些依賴到 transpileDependencies 中，若是官方文檔中沒有明確指出的話可能仍是不能正確的配置。

這種狀況個人解決方法是在 src 目錄下新建一個 utils 目錄，將依賴的js文件移到該目錄下，而後引入該目錄下的js文件。