Vue组件服务器端渲SSR详解renderer如何实现Vue组件的SSR

作者：编程小白 | 发布时间：2025-07-01 |

Vue组件服务器端渲染（SSR）详解

一、设置Vue项目

你得有个Vue项目。没有的话，用Vue CLI建一个。在你的项目文件夹里运行以下命令来装必要的依赖：

vue create my-vue-project


cd my-vue-project

记得装上这个：vue-server-renderer

再装一个简单的Node.js服务器：express

二、创建服务器

然后在项目根目录下创建一个叫 server.js 的文件，写点代码来启动一个Express服务器：

const express = require('express');


const { createBundleRenderer } = require('vue-server-renderer');





const server = express();





server.get('*', (req, res) => {


  const renderer = createBundleRenderer(server bundle, {


    runInNewContext: false,


  });





  renderer.renderToString(req, res);


});





server.listen(8080);

三、配置Webpack

为了让SSR正常工作，你得配置Webpack来生成服务器端和客户端的构建包。创建两个Webpack配置文件：webpack.server.config.js 和 webpack.client.config.js。

在 webpack.server.config.js 中配置服务器端：

// webpack.server.config.js


module.exports = {


  // ...配置Webpack


};

在 webpack.client.config.js 中配置客户端：

// webpack.client.config.js


module.exports = {


  // ...配置Webpack


};

然后在 webpack.config.js 中添加脚本来构建服务器端和客户端的包：

const { merge } = require('webpack-merge');


const commonConfig = require('./webpack.common.js');





module.exports = [merge(commonConfig, {


  target: 'node',


  entry: './src/entry-server.js',


  output: {


    filename: 'server bundle.js',


  },


}), merge(commonConfig, {


  target: 'web',


  entry: './src/entry-client.js',


  output: {


    filename: 'client bundle.js',


  },


})];

四、处理路由和数据预取

为了让SSR支持路由和数据预取，你需要在 src 目录下创建两个文件：entry-client.js 和 entry-server.js，并初始化Vue实例。

在 entry-client.js 中：

// entry-client.js


import Vue from 'vue';


import App from './App.vue';





new Vue({


  render: h => h(App),


}).$mount('#app');

在 entry-server.js 中：

// entry-server.js


import Vue from 'vue';


import App from './App.vue';





export default context => {


  return new Promise((resolve, reject) => {


    const app = new Vue({


      render: h => h(App),


    });


    resolve(app);


  });


};

接下来，创建一个 router.js 文件来定义路由：

// router.js


import Vue from 'vue';


import Router from 'vue-router';


import Home from './views/Home.vue';





Vue.use(Router);





export default new Router({


  routes: [


    {


      path: '/',


      name: 'home',


      component: Home,


    },


  ],


});

通过以上4个步骤，你就可以实现Vue组件的服务器端渲染了。首先是设置Vue项目并安装依赖，然后创建一个Node.js服务器，配置Webpack来生成构建包，最后处理路由和数据预取。

记住，要持续关注Vue的官方文档和社区资源，以便及时掌握最新的SSR技术和最佳实践。你也可以考虑使用Nuxt.js等SSR框架，来简化开发过程。