Vue-CLI3 VUE-CLI服务构建-现代不起作用
乔
npm run build --modern成功运行后，我在输出中仅看到一个应用程序。不应该有两个吗？
东尼19
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。首先，现代模式脚本已预装<link rel="modulepreload">在中<head>：
<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之间的大小，没有区别吗？
我不确定您如何比较大小，但实际上现代版本的大小更大。在以下示例中，我default两次构建了Vue-CLI生成的应用程序（具有预设）（一次不使用--modern，再一次使用--modern），并重命名了输出目录。查看dist-modern中index.html和中的大小增加js/：
➜ 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
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
编辑于
相关文章
TOP 榜单
- 1
Linux的官方Adobe Flash存储库是否已过时？
- 2
在 Python 2.7 中。如何从文件中读取特定文本并分配给变量
- 3
如何检查字符串输入的格式
- 4
如何使用HttpClient的在使用SSL证书，无论多么“糟糕”是
- 5
Modbus Python施耐德PM5300
- 6
错误TS2365：运算符'！=='无法应用于类型'“（”'和'“）”'
- 7
用日期数据透视表和日期顺序查询
- 8
检查嵌套列表中的长度是否相同
- 9
Java Eclipse中的错误13，如何解决？
- 10
ValueError：尝试同时迭代两个列表时，解包的值太多（预期为 2）
- 11
如何监视应用程序而不是单个进程的CPU使用率？
- 12
如何自动选择正确的键盘布局？-仅具有一个键盘布局
- 13
ES5的代理替代
- 14
在令牌内联程序集错误之前预期为 ')'
- 15
有什么解决方案可以将android设备用作Cast Receiver？
- 16
套接字无法检测到断开连接
- 17
如何在JavaScript中获取数组的第n个元素？
- 18
如何将sklearn.naive_bayes与（多个）分类功能一起使用？
- 19
应用发明者仅从列表中选择一个随机项一次
- 20
在Windows 7中无法删除文件（2）
- 21
ggplot：对齐多个分面图-所有大小不同的分面
我来说两句