详解在不使用ssr的情况下解决Vue单页面SEO问题

下面是"详解在不使用ssr的情况下解决Vue单页面SEO问题"的完整攻略。

为什么需要在不使用ssr的情况下解决Vue单页面SEO问题

Vue单页面应用（SPA）在开发过程中非常方便，但是它并不适用于搜索引擎优化（SEO）。因为SPA是运行在浏览器中的，它在服务器端只返回一个HTML文件，而网页内容都是通过ajax动态加载的。这种方式使得搜索引擎很难获取到页面内容，导致的结果就是搜索引擎很难对该页面进行标准的SEO操作。因此我们需要寻找解决方案。

解决方案

1.使用预渲染技术

预渲染技术通过模拟浏览器的行为，将网页完整的静态内容生成到一个HTML文件中。这样即使在未加载任何JavaScript脚本的情况下，浏览器也能够正常渲染该页面。预渲染技术能解决SPA网页被搜索引擎无法抓取的问题。

# 安装prerender-spa-plugin
npm install prerender-spa-plugin --save-dev

1.在vue.config.js中添加配置项

const PrerenderSPAPlugin = require('prerender-spa-plugin')
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer

module.exports = {
  configureWebpack: {
    plugins: [
      new PrerenderSPAPlugin({
        staticDir: path.join(__dirname, 'dist'),
        routes: ['/'], // 所有要预渲染的路径
        renderAfterDocumentEvent: 'render-event',
        // renderer配置
        renderer: new Renderer({
          renderAfterTime: 5000
        })
      })
    ]
  }
}

2.为模板添加标识

预渲染时puppeteer会先访问你的 SPA ，然后去渲染我们预设的路由，将渲染好的内容生成为 HTML 文件。如果你在 head 部分添加了很多 script 标签，puppeteer 会在获取到这些标签后停止渲染，而直接将没有渲染完的 html 输出成预渲染的 html文件，
这时我们该如何处理呢？我们可以通过在组件模板中添加一个标记来钩取预渲染过程，如下：

<div>
    <noscript id="app">
      <div v-if="$route.path === '/'">
        <HelloWorld/>
      </div>
      <div v-else>
        <router-view/>
      </div>
    </noscript>
    <div v-else id="app"></div>
  </div>

2.服务端渲染（Server Side Rendering, SSR）

Server Side Rendering (SSR)并不是 Vue.js 独有的概念，它其实是一种前后端分离的解决方案，即前端工程师负责构建前端页面并将数据请求发送给后端，后端负责对数据进行处理并生成对应的HTML页面，返回给前端进行渲染。SSR 是一种常用的 SEO 解决方案。

总结

SSR可以极大的提高SEO效果，但是实现成本较高，适用于比较大型的项目。而预渲染比较适合中小型项目，实现比较简单。具体解决方案需要根据实际情况而定。

参考文章：

Vue.js应用SEO优化之预渲染（基于prerender-spa-plugin）