如何使用Vue實現通用SSR和SEO最佳化？-Vue.js-PHP中文網

首頁

web前端

Vue.js

如何使用Vue實現通用SSR和SEO最佳化？

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 27, 2023 am 11:00 AM

vueseossr

随着前端技术的发展和应用越来越广泛，用户对于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中添加<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优化可以进一步提高网站在搜索引擎中的排名。为了更好地优化网站，我们需要不断地学习和实践，并不断调整自己的优化策略。

以上是如何使用Vue實現通用SSR和SEO最佳化？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

vue.js和React：了解關鍵差異Apr 10, 2025 am 09:26 AM

Vue.js適合小型到中型項目，而React更適用於大型、複雜應用。 1.Vue.js的響應式系統通過依賴追踪自動更新DOM，易於管理數據變化。 2.React採用單向數據流，數據從父組件流向子組件，提供明確的數據流向和易於調試的結構。

vue.js vs.反應：特定於項目的考慮因素Apr 09, 2025 am 12:01 AM

Vue.js適合中小型項目和快速迭代，React適用於大型複雜應用。 1)Vue.js易於上手，適用於團隊經驗不足或項目規模較小的情況。 2)React的生態系統更豐富，適合有高性能需求和復雜功能需求的項目。

vue怎麼a標籤跳轉Apr 08, 2025 am 09:24 AM

實現 Vue 中 a 標籤跳轉的方法包括：HTML 模板中使用 a 標籤指定 href 屬性。使用 Vue 路由的 router-link 組件。使用 JavaScript 的 this.$router.push() 方法。可通過 query 參數傳遞參數，並在 router 選項中配置路由以進行動態跳轉。

vue怎麼實現組件跳轉Apr 08, 2025 am 09:21 AM

Vue 中實現組件跳轉有以下方法：使用 router-link 和 <router-view> 組件進行超鏈接跳轉，指定 :to 屬性為目標路徑。直接使用 <router-view> 組件顯示當前路由渲染的組件。使用 router.push() 和 router.replace() 方法進行程序化導航，前者保存歷史記錄，後者替換當前路由不留記錄。

vue的div怎麼跳轉Apr 08, 2025 am 09:18 AM

Vue 中 div 元素跳轉的方法有兩種：使用 Vue Router，添加 router-link 組件。添加 @click 事件監聽器，調用 this.$router.push() 方法跳轉。

vue跳轉怎麼傳值Apr 08, 2025 am 09:15 AM

Vue 中數據傳遞有兩種主要方式：props：單向數據綁定，從父組件傳遞數據給子組件。事件：使用事件和自定義事件在組件之間傳遞數據。

vue引入方式怎麼跳轉Apr 08, 2025 am 09:12 AM

Vue.js提供了三種跳轉方式：原生 JavaScript API：使用 window.location.href 進行跳轉。 Vue Router：使用 <router-link> 標籤或 this.$router.push() 方法進行跳轉。 VueX：通過 dispatch action 或 commit mutation 來觸發路由跳轉。