在前端开发中，单页面应用（SPA）极大的提高了用户的交互体验，但是由于SPA内容是通过 JavaScript 动态生成，并不以HTML为载体，解决SEO问题成为了困扰开发者的难题。本文将介绍一种完美解决 Vue SPA 应用 SEO 问题的方法。
问题分析
在了解解决方法之前，我们首先来了解SPA的 SEO 问题。对于传统 SEO 网站，搜索引擎爬虫会对网页中的html和文本进行解析和抓取，通过对抓取到的文本内容进行分析和处理，确定网站的相关性，通过计算各方面的因子，让网站在搜索结果中排名靠前。而对于 SPA 应用，由于内容是通过JavaScript生成的，网页文本信息非常少，搜索引擎爬虫的工作变得困难，并在大多数情况下无法获取有效数据。
解决方案
解决 SPA 应用 SEO 问题，关键是让搜索引擎能够获取到应用程序的内容并进行正确的解析。Vue 应用程序的 SEO 解决方案有两种：服务器端渲染（SSR）和预渲染（Prerendering）。本文将讲解预渲染方案的解决方法。
预渲染方案
预渲染方案是将Vue应用程序在构建时进行处理，将应用程序的所有路由视图解析为静态HTML文件，指向预渲染页面的路由HTML页面，包括Vue应用程序中单页应用程序所需的路由文件和 Webpack 配置文件等。
预渲染方案只需要在预渲染页面中引入Vue的编译版本和对应的库即可，不需要在应用程序的控制面板中引入任何其他文件。
预渲染步骤
- 安装依赖
在使用预渲染方案时，需要安装两个文档：prerender-spa-plugin和vue-meta。
npm install -D prerender-spa-plugin vue-meta
- 修改 app.js
在 app.js 文件中，需要在使用 vue-router 之前添加 import * as VueMeta from 'vue-meta' 代码，并在 Vue 实例上使用 Vue.use(VueMeta)。
-- -------------------- ---- ------- ------ - -- ------- ---- ---------- ------ ------ ---- ---------- ------ --- ---- ----------- ------ --- ---- ----- ---------------- --- ----- --- ------- ------- ------- - -- ------ --
- 添加 Prerender 插件
在项目根目录创建 vue.config.js 文件，并添加预渲染插件prerender-spa-plugin
-- -------------------- ---- -------
----- ------------------ - -------------------------------
----- -------- - ------------------------------------
-------------- - -
----------------- ------ -- -
-- --------------------- --- ------------- ------
------ -
-------- -
--- --------------------
---------- -------------------- --------
------- ----- ----------
--------- --- ----------
------- ---
--------- -----
--
--
-
-
-
-其中，staticDir设置预渲染的dist文件目录；routes是需要预渲染的路由配置；renderer是渲染模式，为了调试预览可以关闭 headless。
到此，预渲染方案的配置就完成了。开发者可以通过构建 npm，使用 npm run build 构建和生成一个生产环境的可预览代码，并将代码部署到web服务上预览代码效果。
示例代码
在实例代码中，我创建了一个简单的Vue应用程序，并使用vue-cli创建的webpack配置。运行预渲染插件以预渲染页面，最后将代码部署到web服务器上以预览生成的预渲染页面效果。
-- -------------------- ---- ------- ---- ---------- --- --------- ----- ----- ---------- ------ ----- ---------------- ----- --------------- ---------------------------- ----------------- ---------- --- ----------- ------- ------ ---- --------------- ------- ----------------------------------- ------- ---------------------- --------------------------------------------- ------- -------
-- -------------------- ---- -------
-- -------
------ --- ---- -----
------ --------- ---- ------------
------ --- ---- -----------
------ --- ---- ----------------------
------ --- ---- ----------------------
------------------
----- ------ - --- -----------
----- ----------
------- -
- ----- ---- ---------- --- --
- ----- ------- ---------- --- -
-
--
--- -----
--- -------
-------
------- - -- ------
---- -------------------- ---- -------
-- -------------
----- ------------------ - -------------------------------
----- -------- - ------------------------------------
-------------- - -
----------------- ------ -- -
-- --------------------- --- ------------- ------
------ -
-------- -
--- --------------------
---------- -------------------- --------
------- ----- --------
--------- --- ----------
------- ---
--------- -----
--
--
-
-
-
-结论
通过使用预渲染方案，可以完美解决 Vue SPA 应用的 SEO 问题。因为预渲染可以在应用程序启动和路由进入之前生成静态HTML，使搜索引擎可爬取。预渲染方案能够为 SPA 应用带来极大的便利，并使其获得更好的排名和曝光度。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67086ad5d91dce0dc870e4b4