Vue.js在[]中插入样式],而不是index.html(webpack,HtmlWebpackPlugin)
基本上,我想实现此index.html结构:
<html> <head> <!-- titles, metas and other "static" stuff --> <link rel="preload/prefetch" ...> <!-- injected by webpack (ok) --> <!-- By default compiled styles are injected here, in head, I want them in body --> </head> <body> <div> My static loading animation All possible styling is inlined It doesn't depend on anything! It also could be anything, even just a plain "Loading..." text. You still WON'T see it until all style's in head are loaded. </div> <div id="app">Vue application goes here</div> <link rel="stylesheet" href="..."> <!-- Styles injected by webpack (WANTED!) --> <script src="..."></script> <!-- Scripts injected by webpack (by default, OK) --> </body>
我想要这个的原因是,我的html完全能够向用户显示初始加载的动画,并且我希望它呈现一旦加载index.html立即立即渲染
,而不依赖于任何其他资源。 真的,我想这是每个人都想要的,只是说...
但是Vue by debault配置为将其已编译的styles包含到<head>标记中,该标记会阻止页面的呈现,直到加载这些样式为止。我找不到有关如何更改它的任何文档。
更新:图片!
因此,我设法手动模拟了两个变体:
样式注入到<head>中(默认)
样式已插入<body>(需要)
这里是视觉
差异的图片:
1]样式被注入到<head>中(默认):
2)样式被注入到<body>中(需要):
在图片上标记为“ html渲染开始”的标签意味着用户实际上看到
正在加载动画,该动画完全在html中定义(在我的情况下为一小块svg和样式,一般情况下可以是任何东西),并且没有依赖于其他任何外部资源进行渲染。
基本上,我想实现这个index.html结构: