Vue-cli3.0浏览器兼容配置问题
本⽂讲⼀讲⾃⼰在⼯作过程中针对vue-cli3.0项⽬兼容性配置的学习和应⽤。
1.browserslist
在 package.json ⽂件⾥的 browserslist 字段 (或⼀个单独的 .browserslistrc ⽂件)，指定了项⽬的⽬标浏览器的范围。
在 package.json 中：
"browserslist":[
"defaults",
"not IE 11",
"not IE_Mob 11",
"maintained node versions",
]
在 .browserslistrc 中：
# ⽀持的浏览器
defaults
not IE 11
not IE_Mob 11
maintained node versions
这个值会被 和 ⽤来确定需要转译的 JavaScript 特性和需要添加的 CSS 浏览器前缀，⾃动⽣成兼容⽬标浏览器的css代码，很好⽤！vue-cli 3.0默认开启了autoprefixer，所以你把需要兼容的字段写进browserslist就好了。
2.Polyfill
Vue CLI 3.0项⽬会默认使⽤ ，它通过 @babel/preset-env 和 browserslist 配置来决定项⽬需要的 polyfill，其作⽤是把ECMAScript
2015+ 版本的代码转换为向后兼容的 JavaScript 语法。
所以我们只需在fig.js⽂件中进⾏配置presets字段即可
presets:[
javascript的特性'@vue/babel-preset-app'
]
};
3.现代模式
有了 Babel 我们可以兼顾所有最新的 ES2015+ 语⾔特性，但也意味着我们需要交付转译和 polyfill 后的包以⽀持旧浏览器。这些转译后的包通常都⽐原⽣的 ES2015+ 代码会更冗长，运⾏更慢。现如今绝⼤多数现代浏览器都已经⽀持了原⽣的 ES2015，所以因为要⽀持更⽼的浏览器⽽为它们交付笨重的代码是⼀种浪费。
Vue CLI 提供了⼀个“现代模式”帮你解决这个问题。以如下命令为⽣产环境构建：
vue-cli-service build --modern
命令⾏中输⼊上述命令，即可得到两套代码，⼀个现代版的包，⾯向⽀持 的现代浏览器，另⼀个旧版的包，⾯向不⽀持的旧浏览器。
现代版的包会通过 在被⽀持的浏览器中加载；它们还会使⽤ 进⾏预加载。
旧版的包会通过 <script nomodule> 加载，并会被⽀持 ES modules 的浏览器忽略。
⼀个针对 Safari 10 中 <script nomodule 的修复会被⾃动注⼊。
在⽣产环境下，现代版的包通常都会表现出显著的解析速度和运算速度，从⽽改善应⽤的加载性能。
提⽰
<script type="module">需要配合始终开启的 CORS 进⾏加载。这意味着你的服务器必须返回诸如Access-Control-Allow-Origin: *的有效的CORS 头。如果你想要通过认证来获取脚本，可使将 crossorigin 选项设置为 use-credentials。
同时，现代浏览器使⽤⼀段内联脚本来避免 Safari 10 重复加载脚本包，所以如果你在使⽤⼀套严格的 CSP，你需要这样显性地允许内联脚本：
Content-Security-Policy: script-src 'self''sha256-4RS22DYeB7U14dra4KcQYxmwt5HkOInieXK1NUMBmQI='
学海⽆涯，往前继续游吧！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。