Vue CLI 瀏覽器兼容性

瀏覽器兼容性

關於瀏覽器的兼容我們可以從下面一些內容來了解與認識：

Vue CLI 3初始化的項目，你會發現有 package.json 文件裏的 browserslist 字段 (或一個單獨的 .browserslistrc 文件)，指定了項目的目標瀏覽器的範圍。這個值會被 @babel/preset-env 和 Autoprefixer 用來確定需要轉譯的 JavaScript 特性和需要添加的 CSS 瀏覽器前綴。

我們通常只需要修改browserslist就可兼容目標瀏覽器：

"browserslist": [
	"ie 10"
]

Polyfills

一個默認的 Vue CLI 項目會使用 @vue/babel-preset-app 它會通過@babel/preset-env 和 browserslist 配置來決定項目需要的polyfill。

現代模式

藉助Babel，我們可以利用ES2015 + 中的所有最新語言功能，但是我們也必須提供transpiled 和 polyfilled 包來支持比較舊的瀏覽器，這些 transpiled bundle 通常比原始的本地 ES2015+ 代碼更詳細，解析和運行也就更慢。

因此 Vue CLI 提供了現代模式來幫助我們解決了此問題，使用以下命令進行生產構建時，它會產生兩個應用程序版本：

• 一個針對支持 ES 模塊的現代瀏覽器的現代捆綁軟件
• 一個是不針對支持ES 模塊的較舊瀏覽器的傳統捆綁 軟件

vue-cli-service build --modern

我們還可以在它的配置中來檢測當前模式，有時候我們只需要爲舊版或現代版更改webpack配置就可以了。

Vue CLI 使用兩個環境變量來傳達信息：

• VUE_CLI_MODERN_MODE：構建從 --modern 標誌開始。
• VUE_CLI_MODERN_BUILD：如果爲 true，則當前配置適用於現代版本，否則將用於舊版本。