Vue-cli3 vue-cli-service build --modern 不起作用
Vue-cli3 vue-cli-service build --modern doesn't work
npm run build --modern运行成功后，我在输出中只看到一个应用程序。不应该有两个吗？
我找不到你放在图片中的文档，但是 docs 上写着：
--modern builds your app using Modern Mode, shipping native ES2015 code to modern browsers that support it, with auto fallback to a legacy bundle.
然后我会将其解释为一个灵活的应用程序。
从您在评论中提到的文档中，我找到了以下相关部分：
The cool part though is that there are no special deployment requirements. The generated HTML file automatically employs the techniques discussed in Phillip Walton's excellent post:
The modern bundle is loaded with <script type="module">, in browsers that support it; they are also preloaded using <link rel="modulepreload"> instead.
The legacy bundle is loaded with <script nomodule>, which is ignored by browsers that support ES modules.
A fix for <script nomodule> in Safari 10 is also automatically injected.
有了它，我能够以相同的方式解释一个根据浏览器表现不同的应用程序。
谈到大小，我不确定是否需要更多设置才能启用它，但根据文档，不需要。我鼓励您继续阅读它们，对我来说，这是满足任何需求的最佳方式。
After npm run build --modern runs successfully, I only see one app in the output. Shouldn't there be two?
实际上，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>
I compare the size between the --modern and no modern, there is not difference?
我不确定您是如何比较尺寸的，但现代建筑实际上尺寸更大。在下面的示例中，我构建了一个 Vue-CLI 生成的应用程序（使用 default 预设）两次（一次不使用 --modern 并且再次使用 --modern），并重命名了输出目录。查看 index.html 和 js/ 的 dist-modern 的大小增加：
➜ ls -al dist*
dist-default:
total 16
drwxr-xr-x 7 tony staff 224 Sep 2 19:25 .
drwxr-xr-x 13 tony staff 416 Sep 2 19:27 ..
drwxr-xr-x 3 tony staff 96 Sep 2 19:25 css
-rw-r--r-- 1 tony staff 1150 Sep 2 19:25 favicon.ico
drwxr-xr-x 3 tony staff 96 Sep 2 19:25 img
-rw-r--r-- 1 tony staff 724 Sep 2 19:25 index.html
drwxr-xr-x 6 tony staff 192 Sep 2 19:25 js
dist-modern:
total 16
drwxr-xr-x 7 tony staff 224 Sep 2 19:25 .
drwxr-xr-x 13 tony staff 416 Sep 2 19:27 ..
drwxr-xr-x 3 tony staff 96 Sep 2 19:25 css
-rw-r--r-- 1 tony staff 1150 Sep 2 19:25 favicon.ico
drwxr-xr-x 3 tony staff 96 Sep 2 19:25 img
-rw-r--r-- 1 tony staff 1213 Sep 2 19:25 index.html <-- LARGER
drwxr-xr-x 10 tony staff 320 Sep 2 19:25 js <-- LARGER
npm run build --modern运行成功后，我在输出中只看到一个应用程序。不应该有两个吗？
我找不到你放在图片中的文档，但是 docs 上写着：
--modernbuilds your app using Modern Mode, shipping native ES2015 code to modern browsers that support it, with auto fallback to a legacy bundle.
然后我会将其解释为一个灵活的应用程序。
从您在评论中提到的文档中，我找到了以下相关部分：
The cool part though is that there are no special deployment requirements. The generated HTML file automatically employs the techniques discussed in Phillip Walton's excellent post:
The modern bundle is loaded with
<script type="module">, in browsers that support it; they are also preloaded using<link rel="modulepreload">instead.The legacy bundle is loaded with
<script nomodule>, which is ignored by browsers that support ES modules.A fix for
<script nomodule>in Safari 10 is also automatically injected.
有了它，我能够以相同的方式解释一个根据浏览器表现不同的应用程序。
谈到大小，我不确定是否需要更多设置才能启用它，但根据文档，不需要。我鼓励您继续阅读它们，对我来说，这是满足任何需求的最佳方式。
After
npm run build --modernruns successfully, I only see one app in the output. Shouldn't there be two?
实际上，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>
I compare the size between the --modern and no modern, there is not difference?
我不确定您是如何比较尺寸的，但现代建筑实际上尺寸更大。在下面的示例中，我构建了一个 Vue-CLI 生成的应用程序（使用 default 预设）两次（一次不使用 --modern 并且再次使用 --modern），并重命名了输出目录。查看 index.html 和 js/ 的 dist-modern 的大小增加：
➜ ls -al dist*
dist-default:
total 16
drwxr-xr-x 7 tony staff 224 Sep 2 19:25 .
drwxr-xr-x 13 tony staff 416 Sep 2 19:27 ..
drwxr-xr-x 3 tony staff 96 Sep 2 19:25 css
-rw-r--r-- 1 tony staff 1150 Sep 2 19:25 favicon.ico
drwxr-xr-x 3 tony staff 96 Sep 2 19:25 img
-rw-r--r-- 1 tony staff 724 Sep 2 19:25 index.html
drwxr-xr-x 6 tony staff 192 Sep 2 19:25 js
dist-modern:
total 16
drwxr-xr-x 7 tony staff 224 Sep 2 19:25 .
drwxr-xr-x 13 tony staff 416 Sep 2 19:27 ..
drwxr-xr-x 3 tony staff 96 Sep 2 19:25 css
-rw-r--r-- 1 tony staff 1150 Sep 2 19:25 favicon.ico
drwxr-xr-x 3 tony staff 96 Sep 2 19:25 img
-rw-r--r-- 1 tony staff 1213 Sep 2 19:25 index.html <-- LARGER
drwxr-xr-x 10 tony staff 320 Sep 2 19:25 js <-- LARGER