nuxt官方文档：www.nuxtjs.cn/guide
为什么要使用nuxt
为什么要使用nuxt呢，nuxt是Vue官方推荐使用的SSR框架，众所周知，Vue所建立的应用基本都是单页面应用，而单页面应用对于SEO是非常不友好的。
什么是SEO
那SEO是什么呢
SEO（英文 Search Engine Optimization）字面理解很简单的，就是“搜索引擎优化”，最简单的理解就是“搜索自然排名”。
就以“SEO优化”为例，去百度搜索下，大家就能快速区分了。
SEO即搜索引擎优化的一种方式，是利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名，最终目的是要拉开与同行的差距，获得品牌收益，占领市场。从字面上来看，SEO就是能使网站排名在前，获得自由精确的流量。
而当我们打开一个vue应用时，检查它的源代码，可得出如下代码
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="icon" href="/favicon.ico">
<link href="https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.min.css" rel="stylesheet">
<link href="https://cdn.bootcdn.net/ajax/libs/highlight.js/11.2.0/styles/base16/github.min.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/wangeditor@latest/dist/wangEditor.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/highlight.js/11.2.0/highlight.min.js"></script>
<title>_芋头丶Blog</title>
<link href="/css/chunk-0fb4d0e4.b931e2b3.css" rel="prefetch">
<link href="/css/chunk-1c51ab7a.9fe7a58b.css" rel="prefetch">
<link href="/css/chunk-e8f0408c.770d46a2.css" rel="prefetch">
<link href="/css/chunk-f907b4b0.a8a5d029.css" rel="prefetch">
<link href="/js/chunk-0fb4d0e4.c444a0ed.js" rel="prefetch">
<link href="/js/chunk-1c51ab7a.594dfc36.js" rel="prefetch">
<link href="/js/chunk-e8f0408c.d26db26a.js" rel="prefetch">
<link href="/js/chunk-f907b4b0.319bbaa4.js" rel="prefetch">
<link href="/css/app.8973c736.css" rel="preload" as="style">
<link href="/css/chunk-vendors.9c0a0257.css" rel="preload" as="style">
<link href="/js/app.5388f911.js" rel="preload" as="script">
<link href="/js/chunk-vendors.e5e76df6.js" rel="preload" as="script">
<link href="/css/chunk-vendors.9c0a0257.css" rel="stylesheet">
<link href="/css/app.8973c736.css" rel="stylesheet">
</head>
<body><noscript><strong>We're sorry but _芋头丶Blog doesn't work properly without JavaScript enabled. Please enable it to
continue.</strong></noscript>
<div id="app"></div>
<script src="/js/chunk-vendors.e5e76df6.js"></script>
<script src="/js/app.5388f911.js"></script>
</body>
</html>
假设我们现在是一个搜索引擎，当我们进入到这个页面时，一眼看过去，只有各种各样的引入，我们根本不清楚这是一个什么样的页面或者网站。
当我们使用了nuxt进行服务端渲染后，搜索引擎爬虫进入到我们的页面源代码之后，就可以发现我们源代码里面一些meta属性里的信息，搜索引擎就知道我们这个网站是干什么用的，从而利于我们网站的SEO。
SEO对比
当未使用nuxt做SSR时，在百度搜"芋头blog"相关，只能找到芋头的相关~
当使用了SSR之后，我们以月落大佬的博客为例 www.yueluo.club/
首先在百度上搜索 "月落的个人博客" 可以看到排在第一个就是了，这就是SEO的作用
然后我们打开月落大佬的博客源码查看
<head>
<title>月落个人博客-原创博客网站</title>
<meta data-n-head="ssr" charset="utf-8">
<meta data-n-head="ssr" name="viewport" content="width=device-width, initial-scale=1">
<meta data-n-head="ssr" data-hid="description" name="description" content="月落的个人博客，记载着学习前端的历程，用以技术分享。">
<meta data-n-head="ssr" data-hid="keywords" name="keywords"
content="月落,博客,月落博客,个人博客,月落个人博客,月落的个人博客,原创博客,原创个人博客,月落原创个人博客,月落个人网站,月落的个人网站,月落个人原创网站">
<link data-n-head="ssr" rel="icon" type="image/x-icon" href="/favicon.ico">
<link data-n-head="ssr" rel="dns-prefetch" type="text/css" href="//data.yueluo.club">
<link data-n-head="ssr" rel="dns-prefetch" type="text/css" href="//at.alicdn.com">
<link data-n-head="ssr" rel="preconnect" type="text/css" href="//data.yueluo.club">
<link data-n-head="ssr" rel="stylesheet" type="text/css" href="//data.yueluo.club/css/reset.css">
<link data-n-head="ssr" rel="stylesheet" type="text/css" href="//data.yueluo.club/css/style.css">
<link data-n-head="ssr" rel="stylesheet" type="text/css" href="//data.yueluo.club/markdown/github-markdown.css">
<link data-n-head="ssr" rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_1821727_bvf0m13rst.css">
</head>
可以看到，head里面多了很多带有 data-n-head="ssr"属性的标签，其中有keyword和description 这些就是SEO的关键词
其次我们可以看到body里面已经把所有内容渲染出来了，这使得我们网站的内容就丰富起来了，也是利于SEO的代码太长了，感兴趣的自己去月落大佬博客逛一逛哈~）
