How to use Vue to implement universal SSR and SEO optimization?

随着前端技术的发展和应用越来越广泛，用户对于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配置文件中添加如下代码：

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中添加0668f9b9672fb8bee085b6d77157e8a916b28748ea4df4d9c2150843fecfba68标签作为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优化可以进一步提高网站在搜索引擎中的排名。为了更好地优化网站，我们需要不断地学习和实践，并不断调整自己的优化策略。

The above is the detailed content of How to use Vue to implement universal SSR and SEO optimization?. For more information, please follow other related articles on the PHP Chinese website!