Nuxt / Vue - 它生成的html和js文件
[英]Nuxt/ Vue - the html and js files it generates
问题描述
I just started using Nuxt for server side rendering. 
我刚开始使用Nuxt进行服务器端渲染。 It seems like a great framework. 这似乎是一个伟大的框架。 But I don't like about it is it generates lots of ugly html markups, js links, and the css is basically being dumped into the html directly. 但我不喜欢它是否会生成大量丑陋的html标记，js链接，并且css基本上被直接转储到html中。 Also, you see lots of data- s. 此外，您还可以看到大量data- 。 It seems that you have no control of them at all (that worries me!). 似乎你根本无法控制它们（这让我担心！）。 For example: 例如：
<!DOCTYPE html>
<html data-n-head-ssr data-n-head="">
<head>
<meta data-n-head="true" charset="utf-8"/><meta data-n-head="true" name="viewport" content="width=device-width, initial-scale=1"/><meta data-n-head="true" data-hid="description" name="description" content="Nuxt.js project"/><title data-n-head="true">Users</title><link data-n-head="true" rel="icon" type="image/x-icon" href="/favicon.ico"/><link rel="preload" href="/_nuxt/manifest.1dd9a3883f67d40b9aa7.js" as="script"><link rel="preload" href="/_nuxt/common.992cf40ea79f7d7937d8.js" as="script"><link rel="preload" href="/_nuxt/app.2d1407798eb328e5c249.js" as="script"><link rel="preload" href="/_nuxt/layouts/default.1360f17fdf8a6083917d.js" as="script"><link rel="preload" href="/_nuxt/pages/users.a5ea843f780a24b7dfd7.js" as="script"><link rel="prefetch" href="/_nuxt/pages/index.3c2e71cd997494896cb8.js"><link rel="prefetch" href="/_nuxt/pages/users-name.353da70d66b2cb18c1c9.js"><link rel="prefetch" href="/_nuxt/pages/about.7e9c73cd5e6253d976d6.js"><link rel="prefetch" href="/_nuxt/layouts/dark.9d852c7e76764cd94b7c.js"><link rel="prefetch" href="/_nuxt/pages/tasks.67c8259c9b53f68ea9a3.js"><style data-vue-ssr-id="5e853cdc:0">body,html{background-color:#fff;color:#000;letter-spacing:.5px;font-family:Source Sans Pro,Arial,sans-serif;height:100vh;margin:0}footer{padding:20px;text-align:center;border-top:1px solid #ddd}a,a:focus,a:hover,a:visited{color:#000}.logo{width:100%;height:auto;max-width:400px;max-height:289px}.layout-enter-active,.layout-leave-to{-webkit-transition:opacity .5s;transition:opacity .5s}.layout-enter,.layout-leave-to{opacity:0}</style><style data-vue-ssr-id="c6f373dc:0">.progress[data-v-5b643829]{position:fixed;top:0;left:0;right:0;height:2px;width:0;-webkit-transition:width .2s,opacity .4s;transition:width .2s,opacity .4s;opacity:1;background-color:#efc14e;z-index:999999}</style><style data-vue-ssr-id="59c3f703:0">.title[data-v-2941d5fc]{margin:30px 0}.users[data-v-2941d5fc]{list-style:none;margin:0;padding:0}.user[data-v-2941d5fc]{margin:10px 0}</style>
</head>
<body data-n-head="">
<div id="__nuxt" data-server-rendered="true"><div class="progress" style="width:0%;height:2px;background-color:black;opacity:0;" data-v-5b643829></div><section class="container" data-v-2941d5fc><img src="/_nuxt/img/logo.a04e995.png" alt="Nuxt.js Logo" class="logo" data-v-2941d5fc><h1 class="title" data-v-2941d5fc>
USERS
</h1><ul class="users" data-v-2941d5fc><li class="user" data-v-2941d5fc><a href="/users/jona" data-v-2941d5fc>
jona
</a></li><li class="user" data-v-2941d5fc><a href="/users/jon" data-v-2941d5fc>
jon
</a></li><li class="user" data-v-2941d5fc><a href="/users/jonas" data-v-2941d5fc>
jonas
</a></li></ul></section></div><script type="text/javascript">window.__NUXT__={"layout":"default","data":[{"users":[{"_id":"59a53db03a35535198135b15","id":null,"name":"jona"},{"_id":"59a53ded3a35535198135b17","id":null,"name":"jon"},{"_id":"59a574afd5bc922f3dbf8b68","id":null,"name":"jonas"}]}],"error":null,"serverRendered":true};</script><script src="/_nuxt/manifest.1dd9a3883f67d40b9aa7.js" defer></script><script src="/_nuxt/layouts/default.1360f17fdf8a6083917d.js" defer></script><script src="/_nuxt/pages/users.a5ea843f780a24b7dfd7.js" defer></script><script src="/_nuxt/common.992cf40ea79f7d7937d8.js" defer></script><script src="/_nuxt/app.2d1407798eb328e5c249.js" defer></script>
</body>
</html>
This is plain ugly to me: 这对我来说很难看：
<div id="__nuxt" data-server-rendered="true"><div class="progress" style="width:0%;height:2px;background-color:black;opacity:0;" data-v-5b643829></div><section class="container" data-v-2941d5fc>
Why do I need id="__nuxt" for? 为什么我需要id="__nuxt" ？
How can I build all the js files into one file - not sure if this is possible? 如何将所有js文件构建到一个文件中 - 不确定这是否可行？
How can I not to embed the entire css into the html? 我怎么能不把整个CSS嵌入到HTML中？
How is this going to effect SEO? 这怎么会影响SEO？
1 个解决方案
解决方案1
3 已采纳 2017-08-29 23:54:24
data-v-* attributes ? data-v-*属性 ？
They come from the vue CSS loader if you use scoped css. 如果你使用scoped css，它们来自vue CSS加载器。
Why do I need id="__nuxt" for? 为什么我需要id =“_ _ nuxt”？
Because it mounts Vue app to DOM element which is <div id="__nuxt"></div> 因为它将Vue应用程序安装到DOM元素，即<div id="__nuxt"></div>
How can I build all the js files into one file - not sure if this is possible? 如何将所有js文件构建到一个文件中 - 不确定这是否可行？
Why would you do that? 为什么要这么做？ Nuxt tries to help you avoid performance issues. Nuxt试图帮助您避免性能问题。 That's why it seperates. 这就是它分离的原因。
How can I not to embed the entire css into the html? 我怎么能不把整个CSS嵌入到HTML中？
You can extract css check out the docs here but again it will extract what's common not all css. 你可以在这里提取css检查文档但是它将再次提取常见的并不是所有的CSS。
How is this going to effect SEO? 这怎么会影响SEO？
It won't. 它不会。
-- -
You can try to extend webpack config for your needs(bundling js, extracting css etc.). 您可以尝试扩展webpack配置以满足您的需求（捆绑js，提取CSS等）。 Check out the docs . 查看文档 。
Edit: Also you can check other popular frameworks like Next or Gatsby . 编辑：您也可以检查其他流行的框架，如Next或Gatsby 。 All of them trying to follow best practices. 所有人都试图遵循最佳做法。 Server side rendered output is not meant to be pretty infact it's uglified(minified) on purpose. 服务器端渲染的输出并不意味着它是故意的（缩小的）它是故意的。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.