vue如何做ssr

Vue SSR（服务器端渲染）可以通过以下几个步骤来实现：1、安装Vue SSR相关的库，2、创建服务器端的入口文件，3、配置Webpack，4、创建服务器，5、集成与优化。 Vue SSR（Server-Side Rendering）的主要目的是提高首屏加载速度和SEO效果。接下来将详细讲解实现Vue SSR的步骤和相关背景。

一、安装Vue SSR相关的库

要实现Vue SSR，首先需要安装一些必要的库，包括vue-server-renderer、express和其他依赖。以下是安装命令：

npm install vue vue-server-renderer express

这些库分别用于渲染Vue组件、在服务器上运行Vue代码以及创建服务器。

二、创建服务器端的入口文件

在项目根目录下创建一个名为server.js的文件，作为服务器端的入口文件。以下是一个简单的示例：

const express = require('express');
const { createBundleRenderer } = require('vue-server-renderer');
const server = express();
const path = require('path');
// 服务端打包生成的 JSON 文件
const serverBundle = require('./dist/vue-ssr-server-bundle.json');
// 客户端打包生成的 JSON 文件
const clientManifest = require('./dist/vue-ssr-client-manifest.json');
const renderer = createBundleRenderer(serverBundle, {
  runInNewContext: false, 
  template: require('fs').readFileSync('./src/index.template.html', 'utf-8'),
  clientManifest
});
server.use('/dist', express.static(path.join(__dirname, './dist')));
server.get('*', (req, res) => {
  const context = { url: req.url };
  renderer.renderToString(context, (err, html) => {
    if (err) {
      if (err.code === 404) {
        res.status(404).end('Page not found');
      } else {
        res.status(500).end('Internal Server Error');
      }
    } else {
      res.end(html);
    }
  });
});
server.listen(8080);

该文件配置了一个简单的Express服务器，并通过vue-server-renderer来渲染Vue组件。

三、配置Webpack

为了打包客户端和服务器端的代码，需要配置Webpack。创建两个Webpack配置文件，分别用于客户端和服务器端。

webpack.client.config.js

const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const { VueSSRClientPlugin } = require('vue-server-renderer/client-plugin');
module.exports = {
  entry: './src/entry-client.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'bundle.client.js'
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin(),
    new CleanWebpackPlugin(),
    new VueSSRClientPlugin()
  ]
};

webpack.server.config.js

const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const { VueSSRServerPlugin } = require('vue-server-renderer/server-plugin');
module.exports = {
  entry: './src/entry-server.js',
  target: 'node',
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'bundle.server.js',
    libraryTarget: 'commonjs2'
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin(),
    new CleanWebpackPlugin(),
    new VueSSRServerPlugin()
  ]
};

这些配置文件定义了如何打包客户端和服务器端的代码，并且使用了vue-server-renderer插件来生成SSR所需的JSON文件。

四、创建服务器

在服务器端入口文件中，我们已经创建了一个简单的Express服务器。现在，需要创建客户端和服务器端的入口文件。

src/entry-client.js

import { createApp } from './main';
const { app, router } = createApp();
router.onReady(() => {
  app.$mount('#app');
});

src/entry-server.js

import { createApp } from './main';
export default context => {
  return new Promise((resolve, reject) => {
    const { app, router } = createApp();
    router.push(context.url);
    router.onReady(() => {
      const matchedComponents = router.getMatchedComponents();
      if (!matchedComponents.length) {
        return reject({ code: 404 });
      }
      resolve(app);
    }, reject);
  });
};

src/main.js

import Vue from 'vue';
import App from './App.vue';
import { createRouter } from './router';
export function createApp() {
  const router = createRouter();
  const app = new Vue({
    router,
    render: h => h(App)
  });
  return { app, router };
}

五、集成与优化

为了进一步优化SSR的性能，可以进行以下几个方面的优化：

缓存：可以使用缓存来存储已经渲染好的页面，提高响应速度。
预取和预加载：使用link rel="preload"和link rel="prefetch"来提前加载资源。
分片和懒加载：将应用程序分成多个代码块，按需加载。
使用更高效的服务器：例如使用Nginx来处理静态资源。

结论

通过以上步骤，你可以实现一个基本的Vue SSR应用。为了进一步提高性能和用户体验，可以采用缓存、预加载、代码分片等优化方法。Vue SSR不仅能显著提升首屏加载速度，还能改善SEO效果，是构建高性能Web应用的有力工具。建议在实际应用中，结合具体需求和场景，进行定制化优化和调整。