当前位置：首页 > 全部内容 > 正文

Vue SSR 服务端渲染实战：Node.js 环境与 Vue CLI 3 配置详解

作者：夜航船

时间：2026-10-22

浏览：548

本文详细讲解 Vue SSR 项目中 Node.js 服务端与 Vue CLI 3 的配置流程。通过修改 package.json 脚本、配置 vue.config.js 生成清单文件，以及搭建 Express 服务器拦截请求，实现服务端渲染。文章涵盖 BundleRenderer 创建、模板处理及客户端/服务端清单生成，帮助开发者快速搭建 SSR 基础环境。

文章目录

前言

Vue SSR 服务端配置概述

此前已完成路由配置，原计划今日处理 Vuex，但考虑到客户端部分的 Vuex 穿插解释较为繁琐，因此调整计划，优先完成服务端相关配置。

待服务端部分完成后，再处理 Vuex 部分，如此安排可使逻辑更加清晰。

Vue SSR 架构包含两个端：客户端与服务端。

因此，需要针对这两个端分别进行 Vue CLI 3 的配置。

接下来直接开始配置过程。

修改 package.json 命令

package.json 脚本配置


//package.json :client代表客户端 :server代表服务端
//使用VUE_NODE来作为运行环境是node的标识
//cli3内置 命令 --no-clean 不会清除dist文件
  "scripts": {
    "serve:client": " vue-cli-service serve",
    "build":"npm run build:server -- --silent && npm run build:client -- --no-clean --silent",
    "build:client": "vue-cli-service build",
    "build:server": "cross-env VUE_NODE=node vue-cli-service build",
    "start:server": "cross-env NODE_ENV=production nodemon nodeScript/index"
  }

修改 vue.config.js 配置

添加完相关脚本命令后，开始改造 Vue CLI 3 的配置。

首先需要引入 vue-server-renderer。

随后根据 VUE_NODE 环境变量的值来决定编译走向，并生成对应的环境清单。

首先创建 Vue CLI 3 服务端的入口文件。

Vue CLI 3 服务端入口配置


// src/entry/server.js
import {
  createApp
} from '../main.js'

export default context => {

  return new Promise((resolve, reject) => {
    const {
      app,
      router
    } = createApp(context.data)
    //根据node传过来的路由 来调用router路由的指向
    router.push(context.url)

    router.onReady(() => {
      //获取当前路由匹配的组件数组。
      const matchedComponents = router.getMatchedComponents()
      //长度为0就是没找到该路由所匹配的组件
      //可以路由设置重定向或者传回node node来操作也可以
      if (!matchedComponents.length) {

        return reject({
          code: 404
        })
      }

      resolve(app)

    }, reject)
  })
}

此处为 Vue CLI 3 的具体配置内容。

vue.config.js 构建配置


//vue.config.js

const ServerPlugin = require('vue-server-renderer/server-plugin'),//生成服务端清单
   ClientPlugin = require('vue-server-renderer/client-plugin'),//生成客户端清单
   nodeExternals = require('webpack-node-externals'),//忽略node_modules文件夹中的所有模块
   VUE_NODE = process.env.VUE_NODE === 'node',
   entry = VUE_NODE ? 'server' : 'client';//根据环境变量来指向入口

module.exports = {
  css: {
    extract: false//关闭提取css,不关闭 node渲染会报错
  },
  configureWebpack: () => ({
    entry: `./src/entry/${entry}`,
    output: {
      filename: 'js/[name].js',
      chunkFilename: 'js/[name].js',
      libraryTarget: VUE_NODE ? 'commonjs2' : undefined
    },
    target: VUE_NODE ? 'node' : 'web',
    externals: VUE_NODE ? nodeExternals({
      //设置白名单
      whitelist: /\.css$/
    }) : undefined,
    plugins: [//根据环境来生成不同的清单。
      VUE_NODE ? new ServerPlugin() : new ClientPlugin()
    ]
  }),
  chainWebpack: config => {
    config.resolve
      .alias
        .set('vue$', 'vue/dist/vue.esm.js')
    config.module
      .rule('vue')
        .use('vue-loader')
          .tap(options => {
            options.optimizeSSR = false;
            return options;
          });
    config.module
      .rule('images')
        .use('url-loader')
          .tap(options => {
            options = {
              limit: 1024,
              fallback:'file-loader?name=img/[path][name].[ext]'
            }
            return options;
          });
  }
}

Node.js 相关配置

由于 Node 渲染必然涉及 GET 请求拦截，需根据 GET 请求地址确定要渲染的页面。

官方提供了 vue-server-renderer 插件。

大致流程为：Node 拦截所有 GET 请求，将获取到的路由地址传递给前端，随后使用 router 实例进行 push 操作。

在继续向下阅读前，先参考官方文档。

创建 BundleRenderer（createBundleRenderer）

将 Vue 实例渲染为字符串（renderToString）

渲染应用程序的模板（template）

生成所需的客户端或服务端清单（clientManifest）

首先创建服务端所需的模板文件。


//public/index.nodeTempalte.html
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="/favicon.ico" rel="external nofollow" >
    <meta charset="utf-8">
    <title>vuessr</title>
  </head>
  <body>
    <!--vue-ssr-outlet-->
  </body>
</html>

Node 部分代码实现

首先创建三个文件：index.js（入口）、proxy.js（代理）以及 server.js（主要配置）。

Node.js 服务端实现


//server.js
const fs = require('fs');
const { resolve } = require('path');
const express = require('express');
const app = express();
const proxy = require('./proxy');
const { createBundleRenderer } = require('vue-server-renderer')

//模板地址
const templatePath = resolve(__dirname, '../public/index.nodeTempalte.html')
//客户端渲染清单
const clientManifest = require('../dist/vue-ssr-client-manifest.json')
//服务端渲染清单
const bundle = require('../dist/vue-ssr-server-bundle.json')
//读取模板
const template = fs.readFileSync(templatePath, 'utf-8')
const renderer = createBundleRenderer(bundle,{
  template,
  clientManifest,
  runInNewContext: false
})


//代理相关
proxy(app);
//请求静态资源相关配置
app.use('/js', express.static(resolve(__dirname, '../dist/js')))
app.use('/css', express.static(resolve(__dirname, '../dist/css')))
app.use('/font', express.static(resolve(__dirname, '../dist/font')))
app.use('/img', express.static(resolve(__dirname, '../dist/img')))
app.use('*.ico', express.static(resolve(__dirname, '../dist')))


//路由请求
app.get('*', (req, res) => {
  res.setHeader("Content-Type", "text/html")
  //传入路由 src/entry/server.js会接收到 使用vueRouter实例进行push
  const context = {
    url: req.url
  }

  renderer.renderToString(context, (err, html) => {
    if (err) {
      if (err.url) {
        res.redirect(err.url)
      } else {
        res.status(500).end('500 | 服务器错误');
        console.error(`${req.url}: 渲染错误 `);
        console.error(err.stack)
      }
    }
    res.status(context.HTTPStatus || 200)
    res.send(html)
  })
})
module.exports = app;



//proxy.js

const proxy = require('http-proxy-middleware');

function proxyConfig(obj){
  return {
    target:'localhost:8081',
    changeOrigin:true,
    ...obj
  }
}
module.exports = (app) => {
  //代理开发环境
  if (process.env.NODE_ENV !== 'production') {
    app.use('/js/main*', proxy(proxyConfig()));
    app.use('/*hot-update*',proxy(proxyConfig()));
    app.use('/sockjs-node',proxy(proxyConfig({ws:true})));
  }
}


//index.js
const app = require('./server')

app.listen(8080, () => {
 console.log('\033[42;37m DONE \033[40;33m localhost:8080 服务已启动\033[0m')
})

完成上述步骤后，即可预览基本的服务渲染效果。

后续仅需补充开发环境配置，以及 Node 数据传递（Vuex）部分。


npm run build
npm run start:server
打开localhost:8080
F12 - Network - Doc 就可以看到内容

Vue SSR 服务端配置概述

最终目录结构展示


|-- vuessr
  |-- .gitignore
  |-- babel.config.js
  |-- package-lock.json
  |-- package.json
  |-- README.md
  |-- vue.config.js
  |-- nodeScript //node 渲染配置
  |  |-- index.js
  |  |-- proxy.js
  |  |-- server.js
  |-- public//模板文件
  |  |-- favicon.ico
  |  |-- index.html
  |  |-- index.nodeTempalte.html
  |-- src
    |-- App.vue
    |-- main.js
    |-- router.config.js//路由集合
    |-- store.config.js//vuex 集合
    |-- assets//全局静态资源源码
    |  |-- 备注.txt
    |  |-- img
    |    |-- logo.png
    |-- components//全局组件
    |  |-- Head
    |    |-- index.js
    |    |-- index.scss
    |    |-- index.vue
    |    |-- img
    |      |-- logo.png
    |-- entry//cli3入口
    |  |-- client.js
    |  |-- server.js
    |  |-- 备注.txt
    |-- methods//公共方法
    |  |-- 备注.txt
    |  |-- mixin
    |    |-- index.js
    |-- pages//源码目录
    |  |-- home
    |  |  |-- index.js
    |  |  |-- index.scss
    |  |  |-- index.vue
    |  |  |-- img
    |  |  |  |-- flow.png
    |  |  |  |-- head_portrait.jpg
    |  |  |  |-- logo.png
    |  |  |  |-- vuessr.png
    |  |  |-- vue
    |  |  |  |-- index.js
    |  |  |  |-- index.scss
    |  |  |  |-- index.vue
    |  |  |-- vueCli3
    |  |  |  |-- index.js
    |  |  |  |-- index.scss
    |  |  |  |-- index.vue
    |  |  |-- vueSSR
    |  |  |  |-- index.js
    |  |  |  |-- index.scss
    |  |  |  |-- index.vue
    |  |  |-- vuex
    |  |    |-- index.js
    |  |    |-- index.scss
    |  |    |-- index.vue
    |  |-- router//路由配置
    |  |  |-- index.js
    |  |-- store//vuex配置
    |    |-- all.js
    |    |-- gather.js
    |    |-- index.js
    |-- static//cdn资源
      |-- 备注.txt

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印，自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式，预览压缩前后的大小。

使用 ›
作者最新文章

在 NestJS 中使用管道验证数据与守卫控制访问权限

Node.js后端生成高强度随机字符串的方法

Node.js环境中怎么使用axios或http模块发送GET请求

Node.js环境下怎么实现JS反混淆自动化？常用库与CLI工具推荐

解决JS逆向常见报错：缺少DOM环境导致代码运行失败

相关文章
热门文章
更多
CSS text-transform与JS修改首字母大写的适用场景区别
JS中constructor属性判断数组存在哪些风险
JS正则替换中$1捕获组引用与字符串重组技巧
全栈开发中JavaScript与Java怎么协作？前后端技术栈配合解析
Node.js后端生成高强度随机字符串的方法
怎么在本地运行JavaScript脚本：Node.js下载安装与环境配置教程
JS正则表达式基础：字面量与RegExp构造函数的区别及常用元字符
JavaScript常见SyntaxError语法错误排查与修复方法
JS 解压出现乱码或报错怎么解决？
JS动态构建复杂嵌套JSON对象的方法