这篇博客详细介绍了Vue CLI如何处理HTML和静态资产。HTML模板会被html webpack插件处理，自动注入资源链接和预加载/预取提示。Vue CLI还支持在HTML中使用lodash模板语法插入值。对于静态资产，可以通过在JavaScript中导入或在模板/CSS中使用相对路径引用，或者放置在public文件夹中使用绝对路径引用。预加载和预取策略可以根据需求调整。在多页设置下，预加载和预取插件需要相应配置。Vue CLI的public文件夹用于存放不受webpack处理的静态资产，文件名包含内容散列以处理缓存。在引用public文件夹的资源时，需考虑publicPath的设置。
HTML
HTML 可以从以下几个方面进行了解：
索引文件
文件 public/index.html 是一个模板，将使用 html webpack 插件进行处理，在构建期间，将自动注入资产链接，除此之外，Vue CLI 还可以自动注入资源提示（预加载/预取）、清单/图标链接（使用PWA插件时）以及生成期间生成的JavaScript和CSS 文件的资产链接。
插值
由于索引文件用作模板，因此可以使用lodash模板语法在其中插入值：
-
<%=VALUE%>用于非缩放插值； -
<%-VALUE%>用于HTML转义插值； -
<%expression%>用于JavaScript控制流。
除了html webpack插件公开的默认值之外，所有客户端env变量也可以直接使用。
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
预载
<link rel="preload"> 是一种资源提示，用于指定页面加载后很快将需要的资源，因此如果我们希望在页面加载生命周期的早期，在浏览器的主要呈现机制启动之前就开始预加载。
默认情况下，Vue CLI应用程序
最低0.47元/天 解锁文章
1783
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
