随着前端技术的不断发展，越来越多的应用采用了 SPA (Single Page Application) 技术来实现，例如 Vue、React 等框架，它们提供了良好的用户体验，但是在 SEO 上却存在很大的问题。搜索引擎无法很好地爬取 SPA 应用的内容，导致网站在搜索引擎上的排名不理想。本文将介绍 SPA 应用 SEO 优化实践之 Vue SSR (Server-Side Rendering)。
什么是 Vue SSR
Vue SSR 是 Vue 的一种服务端渲染方式，也就是在服务端将 Vue 组件渲染成 HTML，再将 HTML 响应给浏览器。对于 SPA 应用来说，通常情况下页面的 DOM 都是在浏览器端渲染完成，而在服务端进行渲染可以避免这种情况，有效提升了网站的 SEO。
Vue SSR 采用了 Node.js 作为服务端，利用其高效的非阻塞 I/O，可以实现高并发的服务端渲染，可以很好地解决 SPA 应用的 SEO 问题。
Vue SSR 操作步骤
- 配置 Node.js 环境 首先需要安装 Node.js，可以在 Node.js 官网上下载安装包进行安装。安装完成后，可在终端中输入以下命令检查是否安装成功：
node -v
- 创建 Vue 项目 可以使用 Vue CLI 4.x 快速创建 Vue 项目。在终端中输入以下命令：
npm install -g @vue/cli vue create vue-ssr
在创建时需要选择插件，选择默认的“Babel”、“Router”和“Vuex”即可。
- 创建服务端入口文件
在项目的根目录下创建
server.js文件，用于启动服务端，代码如下：
-- -------------------- ---- -------
----- --- - --------------
----- ------ - --------------------
----- -------- - -----------------------------------------------
--------------- ----- ---- -- -
----- --- - --- -----
--------- ----------- ------------
--
---------------------------- ----- ----- -- -
-- ----- -
----------------------------- ------ -------
------
-
-------------
--
--
-------------------- 创建客户端入口文件
在项目的
src目录下创建entry-client.js文件，该文件用于创建客户端应用实例。代码如下：
import Vue from 'vue'
import App from './App.vue'
new Vue({
render: h => h(App)
}).$mount('#app')- 创建服务端渲染入口文件
在项目的
src目录下创建entry-server.js文件，该文件用于创建服务端渲染实例。代码如下：
-- -------------------- ---- -------
------ --- ---- -----
------ --- ---- -----------
------ ------- ------- -- -
------ --- -----
----- -
---- -----------
--
------- - -- ------
--
-- 编写 webpack 配置文件
在项目的根目录下创建
webpack.config.js文件，配置服务端和客户端打包的入口等。代码如下：
-- -------------------- ---- -------
----- ---- - ---------------
----- - --------------- - - ---------------------
----- - ------------------ - - -------------------------------
----- ------------- - ---------------------------------
-------------- - -
------- -------
----- --------------
------ -
------- -------------
--
------- -
----- ----------------------- --------
-------------- -----------
--
---------- ------------------
------- -
------ -
-
----- ---------
------- ------------
--
-
----- --------
------- ---------------
-------- --------------
-
-
--
-------- -
--- ------------------
--- --------------------
-
-- 修改 package.json 改变默认的 build 命令，将其改成服务端和客户端的打包命令，代码如下：
-- -------------------- ---- -------
-
------- ----------
---------- --------
---------- -
-------- ---- --- ------------ -- --- --- --------------
--------------- ---------------- ----- ---------- -------- --- ------ --------
--------------- ---------------- ----- ---------- -------- ------ ------ --------------
--
--------------- -
------ ---------
--
------------------ -
------------------- ----------
------------- ----------
---------------------- ----------
---------- ----------
-------------- ----------
------------------------- --------
-
-- 打包代码并启动服务 在终端输入以下命令进行项目打包：
npm run build
打包成功后，在终端输入以下命令启动服务：
node ./dist/server.js
- 测试服务端渲染效果
在浏览器中输入
http://localhost:8080，页面将展示“Hello World”，这意味着服务端渲染已经完成。
Vue SSR 总结
Vue SSR 是一种解决 SPA 应用 SEO 问题的方式，采用了服务端渲染方式，将页面的 DOM 在服务端渲染完成，避免了搜索引擎很难爬取 SPA 应用的问题。本文介绍了 Vue SSR 的操作步骤，希望能对大家有所帮助。
示例代码
完整的示例代码可以在 Github 中找到。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64df4ed2f6b2d6eab3a83134