Vue.js：如何防止 `vue-cli-service --modern` 构建遗留​​包？

Posted 2023-02-22

【中文标题】Vue.js：如何防止 `vue-cli-service --modern` 构建遗留​​包？

【英文标题】：Vue.js: How can I prevent `vue-cli-service --modern` from building the legacy bundle?

【发布时间】：2020-01-09 21:23:57

【问题描述】：

Modern mode of Vue CLI 总是构建两个包：现代和传统。

$ vue-cli-service build --modern

-  Building legacy bundle for production...
(snip)
DONE  Compiled successfully in 42448ms 
(snip)
-  Building modern bundle for production...
(snip)
DONE  Compiled successfully in 39693ms
(snip)
DONE  Build complete. The dist directory is ready to be deployed.
(snip)
Done in 89.76s.

所以它比我在没有--modern 选项的情况下构建应用程序花费的时间是我的两倍。如果应用只针对现代浏览器，那就太浪费时间了。

有没有办法阻止 Vue CLI 创建旧包？

【问题讨论】：

williangd 在 github 上也提到了同样的问题：github.com/vuejs/vue-cli/issues/1465#issuecomment-501365256.

问题已在您链接的问题中得到解答，您还想知道什么？

@JacobRaihle 对。最近，正如您指出的那样，我从 LinusBorg 在问题中的回答中找到了解决方案。在确认我的项目解决方案的结果后，留给我的任务是发布这个问题的答案。

【参考方案1】：

您不需要使用--modern 标志。 相反，只需调整.browserslistrc，如下所示：

last 2 years

Vue CLI 的 "Modern" mode 代表构建两个捆绑包的模式 - 旧版和现代版 - 但它并不代表使您的 Vue 应用程序代码“现代”的适当方式。 如果您只想要现代输出，只需调整目标浏览器即可。

在 vue-cli 问题上另见 this comment。

【讨论】：

用 github 问题中的所有 cmets 和建议敲了我近 2 个小时，但没有任何效果。这是唯一对我有用的东西！谢谢。

反之亦然，即如果您使用 --modern 模式，则不需要 browserslist？