在当前的前端开发领域，单页面应用（SPA）架构因其快速的开发效率和优秀的用户体验而广受欢迎。然而，SEO（搜索引擎优化）问题一直是SPA的一个痛点。为了解决这一问题，服务器端渲染（SSR）技术应运而生。Vue.js 作为一款流行的前端框架，提供了强大的SSR支持。本文将深入探讨如何使用Vue CLI快速构建支持SSR的全栈应用。

一、Vue CLI 简介

Vue CLI 是一个基于 Vue.js 的标准化工具链，用于快速搭建和配置 Vue.js 项目。它提供了一整套构建/打包工具，包括 Webpack、Babel、ESLint 等，让开发者可以专注于业务逻辑，而不必关心构建配置的复杂性。

1.1 Vue CLI 的核心功能

  • 项目生成：通过简单的命令行交互，快速生成带有标准化结构的新项目。 
    
vue create my-project
  • Vue CLI 插件体系：支持插件化，可以根据项目需求添加插件，如 Vue Router、Vuex、ESLint、PWA 支持等。
  • 项目服务与构建：提供 vue serve 和 vue build 命令，用于开发环境的快速启动和生产环境的优化构建。

二、Vue-CLI SSR 架构

Vue-CLI 提供了两种方式来实现 SSR 效果：

2.1 方式一：使用 prerender-spa-plugin 插件

prerender-spa-plugin 是一个用于预渲染 Vue 单页应用的插件。它可以在服务器上预渲染应用的路由，并将其缓存起来，以提高首屏加载速度和 SEO 优化。

2.1.1 安装插件

npm install --save-dev prerender-spa-plugin

2.1.2 配置插件

在 vue.config.js 文件中配置 prerender-spa-plugin：

const PrerenderSPAPlugin = require('prerender-spa-plugin');

module.exports = {
  // ...
  configureWebpack: {
    plugins: [
      new PrerenderSPAPlugin({
        // ...
      }),
    ],
  },
};

2.1.3 预渲染路由

在 src 目录下创建 prerender.js 文件，配置需要预渲染的路由：

module.exports = [
  '/about',
  '/contact',
  // ...
];

2.2 方式二：使用 Vue 官方提供的 SSR 模板

Vue 官方提供了一套 SSR 模板，可以快速搭建 SSR 项目。以下是搭建 SSR 项目的步骤：

2.2.1 创建项目

vue create my-ssr-project

2.2.2 安装 SSR 相关依赖

cd my-ssr-project
npm install --save vue-server-renderer express

2.2.3 编写服务器端渲染逻辑

在 src 目录下创建 server.js 文件，编写服务器端渲染逻辑：

const Vue = require('vue');
const express = require('express');
const server = express();
const renderer = require('vue-server-renderer').createRenderer();

server.get('*', (req, res) => {
  const app = new Vue({
    data: {
      url: req.url,
    },
    template: `<div>访问的 URL 是： {{ url }}</div>`,
  });

  renderer.renderToString(app, (err, html) => {
    if (err) {
      res.status(500).end('Internal Server Error');
      return;
    }
    res.end(`
      <!DOCTYPE html>
      <html lang="en">
        <head><title>Hello</title></head>
        <body>${html}</body>
      </html>
    `);
  });
});

server.listen(8080);

2.2.4 编写客户端渲染逻辑

在 src 目录下创建 client.js 文件，编写客户端渲染逻辑：

const Vue = require('vue');
const app = new Vue({
  el: '#app',
  data: {
    url: window.location.pathname,
  },
  template: `<div>访问的 URL 是： {{ url }}</div>`,
});

三、总结

本文介绍了如何使用 Vue CLI 快速搭建支持 SSR 的全栈应用。通过两种方式，我们可以实现 Vue 应用的服务器端渲染，从而提高首屏加载速度和 SEO 优化。希望本文能对您在开发 Vue 全栈应用时有所帮助。