所属分类：web前端开发
随着前端技术的发展和应用越来越广泛，用户对于Web页面的交互和性能有着越来越高的要求。在这样的背景下，Vue作为一种受欢迎的前端框架，早已成为众多开发者眼中的热门选择。同时，随着搜索引擎优化（SEO）越来越受到企业和网站拥有者的重视，如何使用Vue实现通用SSR和SEO优化已成为一个重要议题。本文将介绍如何使用Vue实现通用SSR和SEO优化。
一、什么是通用SSR?
首先，了解一下通用SSR是什么。SSR，即服务器端渲染（Server-side rendering），它是一种将服务端直接生成HTML文件并返回给客户端的技术。简单来说，SSR就是通过服务端去渲染网页，然后将渲染好的结果返回给浏览器端，这样可以提高页面加载速度和搜索引擎的可访问性。
而通用SSR是指使用同一套代码既能运行在服务器端，生成HTML文件返回客户端，又能在浏览器端运行，实现SPA（Single-page Application）所具有的交互性、速度和美观性。通用SSR在实现上相对比较复杂，但可以解决传统SSR的一些局限性，兼顾用户体验和开发调试。
二、如何使用Vue实现通用SSR？
Vue官网提供了一个基于Webpack的SSR模板工程，可以快速上手使用。下面我们来一步步介绍如何使用Vue实现通用SSR。
1、创建项目
首先，我们需要安装Vue CLI，并使用命令行创建一个新项目：
vue create my-project
2、安装和配置SSR插件
在项目根目录下，我们需要安装两个插件，分别是vue-server-renderer和webpack-node-externals，可以使用以下命令进行安装：
npm install vue-server-renderer webpack-node-externals --save
安装好后，在项目的package.json文件中可以看到这两个插件的依赖。
然后我们需要在项目中创建一个新的文件夹src/entry-server.js和src/entry-client.js，分别用来作为服务端和客户端的入口脚本。随后需要在vue.config.js配置文件中添加如下代码：
微博登录
QQ登录const VueSSRServerPlugin = require('vue-server-renderer/server-plugin')
const VueSSRClientPlugin = require('vue-server-renderer/client-plugin')
const nodeExternals = require('webpack-node-externals')
const TARGET_NODE = process.env.WEBPACK_TARGET === 'node'
const target = TARGET_NODE ? 'server' : 'client'
module.exports = {
css: {
extract: false
},
outputDir: './dist/' + target,
configureWebpack: () => ({
entry: `./src/entry-${target}.js`,
devtool: 'source-map',
target: TARGET_NODE ? 'node' : 'web',
node: TARGET_NODE ? undefined : false,
output: {
libraryTarget: TARGET_NODE ? 'commonjs2' : undefined
},
optimization: {
splitChunks: TARGET_NODE ? false : undefined
},
externals: TARGET_NODE ? nodeExternals({
allowlist: [/.css$/]
}) : undefined,
plugins: [
TARGET_NODE ? new VueSSRServerPlugin() : new VueSSRClientPlugin()
]
}),
chainWebpack: config => {
config.module
.rule('vue')
.use('vue-loader')
.tap(options => {
options.optimizeSSR = false
return options
})
}
}然后，在服务器端入口文件entry-server.js中添加如下代码：
import { createApp } from './app'
export default context => {
return new Promise((resolve, reject) => {
const { app, router, store } = createApp()
router.push(context.url)
router.onReady(() => {
const matchedComponents = router.getMatchedComponents()
if (!matchedComponents.length) {
return reject({ code: 404 })
}
Promise.all(matchedComponents.map(Component => {
if (Component.asyncData) {
return Component.asyncData({
store,
route: router.currentRoute
})
}
})).then(() => {
context.state = store.state
resolve(app)
}).catch(reject)
}, reject)
})
}在客户端入口文件entry-client.js中添加如下代码：
import { createApp } from './app'
const { app, router, store } = createApp()
router.onReady(() => {
if (window.__INITIAL_STATE__) {
store.replaceState(window.__INITIAL_STATE__)
}
app.$mount('#app')
})此外，我们还需要创建一个src/app.js文件，包含Vue实例创建、路由、状态管理等代码，具体如下：
import Vue from 'vue'
import App from './App.vue'
import { createRouter } from './router'
import { createStore } from './store'
Vue.config.productionTip = false
export function createApp() {
const router = createRouter()
const store = createStore()
const app = new Vue({
router,
store,
render: h => h(App)
})
return { app, router, store }
}最后，在public/index.html中添加<div id="app"></div>标签作为Vue实例挂载的目标。
3、启动开发环境
在完成以上配置后，我们可以通过以下命令启动开发环境：
npm run serve
4、构建并启动生产环境
在开发完成后，我们需要对项目进行构建，并启动生产环境。构建命令：
npm run build
启动生产环境命令：
npm run start
启动生产环境后，可以在浏览器中输入http://localhost:端口号/进行访问。此时，我们就成功地使用Vue实现了通用SSR。
三、如何进行SEO优化？
在使用Vue实现通用SSR后，要想实现SEO优化，需要注意以下几点。
1、为页面添加Meta标签
Meta标签对于SEO优化是非常重要的。在当前网页即将被搜索引擎抓取时，搜索引擎会读取Meta标签中的信息，并根据这些信息来判断关键词、网页描述、页面语言等内容。在Vue中，我们可以通过在服务端渲染时添加Meta标签来进行优化。
以添加网页标题为例，我们可以在entry-server.js中添加如下代码：
context.title = '页面标题'
而在网页模板中，可以使用Vue的模板语法来动态设置Meta标签，例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{{ title }}</title>
<meta name="keywords" content="{{ keywords }}">
<meta name="description" content="{{ description }}">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="app">{{ APP }}</div>
<script src="{{ shasum }}/js/vendor.js"></script>
<script src="{{ shasum }}/js/app.js"></script>
</body>
</html>2、使用预渲染，生成静态HTML文件
预渲染是指在开发阶段，将需要进行SEO优化的页面提前生成静态HTML文件，并在生产环境中使用这些静态HTML文件，而不是每次请求都需要从服务器端重新生成。
我们可以使用插件例如prerender-spa-plugin来进行预渲染。在Vue中，我们可以通过在vue.config.js中添加如下代码来配置prerender-spa-plugin：
const PrerenderSPAPlugin = require('prerender-spa-plugin')
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer
module.exports = {
// ...其他配置
configureWebpack: config => {
if (process.env.NODE_ENV !== 'production') return
return {
plugins: [
new PrerenderSPAPlugin({
staticDir: path.join(__dirname, 'dist'),
routes: ['/route1', '/route2', '/route3'],
renderer: new Renderer({
renderAfterDocumentEvent: 'render-event'
})
})
]
}
}
}其中，staticDir属性为静态文件存放路径，routes属性是需要生成静态文件的路由，renderAfterDocumentEvent属性是页面内容渲染完成后，触发的事件名称。
3、使用Schema.org标记
Schema.org是一个以描述数据为主要目标的、由搜索引擎联盟所维护的标准。通过使用Schema.org标记，我们可以向搜索引擎提供更加详细的页面描述和结构化数据，有利于提升网站在搜索引擎排名中的地位。
在Vue中，可以使用vue-meta-info插件来动态设置Schema.org标记，例如：
export default {
metaInfo() {
return {
meta: [
{ name: 'author', content: 'author_name' },
{ name: 'keywords', content: 'keywords1,keywords2' }
],
link: [
{ rel: 'author', href: 'author_link' }
],
script: [
{
type: 'application/ld+json',
json: {
'@context': 'https://schema.org',
'@type': 'Person',
'name': 'John Doe',
},
},
],
}
}
}总结
在本文中，我们介绍了如何使用Vue实现通用SSR，以及如何进行SEO优化。通过使用通用SSR可以提高网站的加载速度和搜索引擎的可访问性，而通过SEO优化可以进一步提高网站在搜索引擎中的排名。为了更好地优化网站，我们需要不断地学习和实践，并不断调整自己的优化策略。
