Nuxt/ Vue - 它生成的 html 和 js 文件
Nuxt/ Vue - the html and js files it generates
我刚开始使用 Nuxt 进行服务器端渲染。这似乎是一个很棒的框架。但我不喜欢它是因为它会生成很多丑陋的 html 标记、js 链接，并且 css 基本上直接被转储到 html 中。此外，您会看到很多 data-。看起来你根本无法控制它们（这让我很担心！）。例如：
<!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>
这对我来说太丑了：
<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>
为什么我需要 id="__nuxt"？
如何将所有 js 文件构建到一个文件中 - 不确定这是否可行？
如何才能不将整个 css 嵌入到 html 中？
这将如何影响 SEO？
data-v-* 属性?
它们来自 vue CSS loader 如果你使用 scoped css.
为什么我需要 id="__nuxt"？
因为它将 Vue 应用程序挂载到 DOM 元素，即 <div id="__nuxt"></div>
如何将所有 js 文件构建到一个文件中 - 不确定是否可行？
你为什么要这么做？ Nuxt 试图帮助您避免性能问题。这就是它分开的原因。
如何才能不把整个css嵌入到html中呢？
您可以提取 css 查看文档 here 但它会再次提取常见的内容，而不是全部 css.
这将如何影响 SEO？
不会。
--
您可以尝试根据需要扩展 webpack 配置（捆绑 js、提取 css 等）。查看 docs.
编辑：您还可以查看其他流行的框架，例如 Next or Gatsby。他们都试图遵循最佳实践。服务器端呈现的输出并不意味着漂亮，事实上它是故意丑化（缩小）的。
我刚开始使用 Nuxt 进行服务器端渲染。这似乎是一个很棒的框架。但我不喜欢它是因为它会生成很多丑陋的 html 标记、js 链接，并且 css 基本上直接被转储到 html 中。此外，您会看到很多 data-。看起来你根本无法控制它们（这让我很担心！）。例如：
<!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>
这对我来说太丑了：
<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>
为什么我需要 id="__nuxt"？
如何将所有 js 文件构建到一个文件中 - 不确定这是否可行？
如何才能不将整个 css 嵌入到 html 中？
这将如何影响 SEO？
data-v-* 属性?
它们来自 vue CSS loader 如果你使用 scoped css.
为什么我需要 id="__nuxt"？
因为它将 Vue 应用程序挂载到 DOM 元素，即 <div id="__nuxt"></div>
如何将所有 js 文件构建到一个文件中 - 不确定是否可行？
你为什么要这么做？ Nuxt 试图帮助您避免性能问题。这就是它分开的原因。
如何才能不把整个css嵌入到html中呢？
您可以提取 css 查看文档 here 但它会再次提取常见的内容，而不是全部 css.
这将如何影响 SEO？
不会。
--
您可以尝试根据需要扩展 webpack 配置（捆绑 js、提取 css 等）。查看 docs.
编辑：您还可以查看其他流行的框架，例如 Next or Gatsby。他们都试图遵循最佳实践。服务器端呈现的输出并不意味着漂亮，事实上它是故意丑化（缩小）的。