下面是关于“15分钟学会vue项目改造成SSR(小白教程)”的完整攻略。

什么是SSR？

SSR（Server Side Rendering）即服务端渲染，根据服务端返回的数据，在服务端生成HTML字符串，然后将其发送给客户端进行展示。与传统的SPA（Single Page Application）相比，SSR能够优化页面的SEO和首屏加载速度。

如何将Vue项目改造成SSR？

将Vue项目改造成SSR的过程，可以分为以下几个步骤：

1. 安装依赖

首先需要安装一些必要的依赖。在项目根目录下执行以下命令：

npm install --save vue-server-renderer express

2. 创建服务端入口文件

在项目根目录下创建一个名为server.js的文件，并编写如下代码：

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

const app = express();

app.get('/', (req, res) => {
  const vm = new Vue({
    data: {
      message: 'Hello, World!'
    },
    template: '<div>{{ message }}</div>'
  });

  renderer.renderToString(vm, (err, html) => {
    if (err) {
      res.status(500).end('Internal Server Error');
      return;
    }

    res.end(html);
  });
});

app.listen(3000, () => {
  console.log('Server is running at http://localhost:3000');
});

这个代码中，我们首先引入了express、Vue和vue-server-renderer模块。然后我们创建了一个express实例，并在根路由下创建了一个Vue实例，并且将其渲染成HTML字符串，最后将其返回给客户端。这里需要注意，我们需要使用vue-server-renderer的createRenderer()方法来创建一个渲染器。

3. 修改客户端入口文件

在客户端入口文件中，我们需要从服务端获取到渲染好的HTML字符串并渲染到页面中。修改main.js文件如下：

import Vue from 'vue';
import App from './App.vue';

Vue.config.productionTip = false;

new Vue({
  render: h => h(App),
}).$mount('#app');

if (window.__INITIAL_STATE__) {
  new Vue({
    el: '#app',
    render: h => h(App),
  });
}

其中，我们使用了window.__INITIAL_STATE__来表示从服务端获取到的初始状态，如果存在该变量，则说明是由服务端渲染的页面，此时我们需要将其作为初始状态创建一个新的Vue实例，并挂载到已有的DOM节点上。

4. 修改webpack配置文件

最后，在webpack配置文件中，我们需要添加相应的插件和打包规则。修改webpack.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 isServer = process.env.NODE_ENV === 'server';

module.exports = {
  entry: isServer ? './src/entry-server.js' : './src/entry-client.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: isServer ? 'bundle.server.js' : 'bundle.client.js',
    libraryTarget: isServer ? 'commonjs2' : 'var',
  },
  target: isServer ? 'node' : 'web',
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
      },
      // other rules
    ],
  },
  plugins: [
    isServer ? new VueSSRServerPlugin() : new VueSSRClientPlugin(),
  ],
  externals: isServer ? nodeExternals() : undefined,
}

这里我们根据打包类型分别配置客户端和服务端的入口文件，输出文件和打包类型。同时，我们也分别添加了不同的Webpack插件和对服务端打包的规则，而对于客户端的打包规则则与传统的SPA一致。

至此，我们已经完成了将Vue项目改造成SSR的全部过程。可以看到，虽然SSR需要更多的配置和工作量，但同时也带来了更好的性能和SEO。

示例1

假设有一个简单的Vue项目，我们需要将其改造成SSR。我们首先按照上述攻略的步骤一步一步进行操作，并运行npm run build命令进行打包。然后我们打开dist/bundle.server.js文件，可以看到其中已经包含了我们的Vue代码。最后我们运行node dist/bundle.server.js命令启动应用，并在浏览器中访问http://localhost:3000/，可以看到页面已经得到了服务端渲染，同时也在Chrome的开发者工具中看到了相应的内容。

示例2

假设我们的Vue项目还需要与第三方库进行交互，例如向Web API请求数据或者调用其它JavaScript库。在这种情况下，我们需要把这些操作放在一个异步的生命周期钩子中，以免在服务端渲染时阻塞进程。例如，在created钩子中发起请求：

export default {
  name: 'App',
  data() {
    return {
      message: '',
    };
  },
  created() {
    this.$http.get('/api/xxx').then(response => {
      this.message = response.data.message;
    });
  }
};

这里我们使用了Vue的内置Xhr插件来进行请求。由于在服务端运行时，并不支持将XHR发送到客户端网站上的Web API，因此我们需要手动设置。在entry-server.js文件中添加如下代码：

import { createApp } from './app';

export default (context) => {
  return new Promise((resolve, reject) => {
    const { app, router } = createApp();

    router.push(context.url);

    router.onReady(() => {
      const matchComponent = router.getMatchedComponents()[0];

      if (!matchComponent) {
        reject({ code: 404, message: 'Page not found' });
      }

      if (matchComponent.asyncData) {
        matchComponent.asyncData().then(data => {
          context.data = data;
          resolve(app);
        });
      } else {
        resolve(app);
      }
    }, reject);
  });
};

这里我们在服务端入口文件中包装了整个Vue应用，并且通过context参数传入到了匹配到的组件中。对于异步数据，我们在服务端进行请求并将数据存储在context中。

在组件中，我们需要加入一个异步数据（asyncData）方法来获取服务端传递的数据：

<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      message: this.$ssrContext.data.message,
    };
  },
  asyncData() {
    return this.$http.get('/api/xxx').then(response => {
      return { message: response.data.message };
    });
  }
};
</script>

这里我们绑定了message数据到模板，并在异步数据方法中通过内置的异步API从服务端请求数据并返回。

这样，在服务端渲染时，会先调用该组件的异步数据方法，获取到数据之后再进行渲染。

综上，这两个示例说明了在将Vue项目改造成SSR时的两个常见情况。需要注意的是，在实际开发中，可能会对应更加复杂的场景，不同的情况需要采取不同的处理方式。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：15分钟学会vue项目改造成SSR(小白教程) - Python技术站

15分钟学会vue项目改造成SSR(小白教程)