Question

npm run build --modern成功运行后，我在输出中仅看到一个应用程序。不应该有两个吗？ enter image description here

Answer 1

我找不到您放入图片中的文档，但是在docs中它说：

--modern使用现代模式构建您的应用程序，将本机ES2015代码发送到支持该代码的现代浏览器，并自动回退到旧版捆绑软件。

然后，我会将其解释为一个灵活的应用程序。

从您在评论中提到的文档中，我发现了这一相关部分：

最酷的部分是，没有特殊的部署要求。生成的HTML文件自动采用Phillip Walton的精彩文章中讨论的技术：

现代捆绑包随<script type="module">一起加载，在支持它的浏览器中；它们也使用<link rel="modulepreload">进行了预加载。

旧版捆绑包已加载<script nomodule>，受支持ES模块的浏览器所忽略。

Safari 10中的<script nomodule>修复程序也会自动注入。

通过这种方式，我可以用一种相同的方式解释一个应用程序，该应用程序的行为因浏览器而异。

关于大小，我不确定是否需要更多设置来启用它，但是根据文档，不是。我鼓励您继续阅读它们，对我来说，这是随时了解任何需求的最佳方式。

Answer 2

npm run build --modern成功运行后，我在输出中仅看到一个应用程序。不应该有两个吗？

实际上，build --modern命令在dist/js中创建了两个应用程序（请参见dist/js/app.4e3aeb0e.js和dist/js/app-legacy.10b7d753.js）：

➜ ls -al dist/js
total 1840
drwxr-xr-x  10 tony  staff     320 Sep  2 19:25 .
drwxr-xr-x   7 tony  staff     224 Sep  2 19:25 ..
-rw-r--r--   1 tony  staff    4772 Sep  2 19:25 app-legacy.10b7d753.js                    <-- LEGACY
-rw-r--r--   1 tony  staff   23682 Sep  2 19:25 app-legacy.10b7d753.js.map
-rw-r--r--   1 tony  staff    4718 Sep  2 19:25 app.4e3aeb0e.js                           <-- MODERN
-rw-r--r--   1 tony  staff   23625 Sep  2 19:25 app.4e3aeb0e.js.map
-rw-r--r--   1 tony  staff   80454 Sep  2 19:25 chunk-vendors-legacy.df5f2e07.js          <-- LEGACY
-rw-r--r--   1 tony  staff  397535 Sep  2 19:25 chunk-vendors-legacy.df5f2e07.js.map
-rw-r--r--   1 tony  staff   63276 Sep  2 19:25 chunk-vendors.4fd390fb.js                 <-- MODERN
-rw-r--r--   1 tony  staff  326296 Sep  2 19:25 chunk-vendors.4fd390fb.js.map

应用程序有选择地加载到index.html中。首先，现代模式脚本在<head>中预载了<link rel="modulepreload">：

<link href=/js/app.4e3aeb0e.js rel=modulepreload as=script>
<link href=/js/chunk-vendors.4fd390fb.js rel=modulepreload as=script>

以后将这些脚本加载到<body>中（注意：只有支持<script type="module">的浏览器才加载脚本）：

<script type=module src=/js/chunk-vendors.4fd390fb.js></script>
<script type=module src=/js/app.4e3aeb0e.js></script>

最后，对旧模式脚本有一个nomodule后备（注意：nomodule属性告诉浏览器仅在不支持模块脚本的情况下才加载脚本 ）：

<script>!function () { var e = document, t = e.createElement("script"); if (!("noModule" in t) && "onbeforeload" in t) { var n = !1; e.addEventListener("beforeload", function (e) { if (e.target === t) n = !0; else if (!e.target.hasAttribute("nomodule") || !n) return; e.preventDefault() }, !0), t.type = "module", t.src = ".", e.head.appendChild(t), t.remove() } }();</script>
<script src=/js/chunk-vendors-legacy.df5f2e07.js nomodule></script>
<script src=/js/app-legacy.10b7d753.js nomodule></script>

我比较了--modern和no modern之间的大小，没有区别吗？

我不确定您如何比较大小，但是实际上，现代版本的大小更大。在以下示例中，我两次构建了Vue-CLI生成的应用程序（预设了{{1}）（一次没有default，又一次使用了--modern），并重命名了输出目录。查看--modern和dist-modern在index.html中的大小增加：

js/

Vue-CLI3 VUE-CLI服务构建-现代不起作用

2 个答案: