vue服务端渲染SSR

news2024/12/25 13:37:20

一：ssr的理解
1、服务端渲染 Server Side Render
SSR解决方案，后端渲染出完整的首屏的dom结构返回，前端拿到的内容包括首屏及完整spa结构，应用激活后依然按照spa方式运行，这种页面渲染方式被称为服务端渲染 (server side render)
在这里插入图片描述
二：Vue SSR实战
1、新建工程
vue-cli创建工程即可

vue create ssr

2、安装依赖

npm install vue vue-server-renderer express -D

3、启动脚本
创建一个express服务器，将vue ssr集成进来，./server/02-simple-ssr.js

// 导入express作为渲染服务器
const express = require("express");
// 导入Vue用于声明待渲染实例
const Vue = require("vue");
// 导入createRenderer用于获取渲染器
const { createRenderer } = require("vue-server-renderer");
// 创建express实例
const app = express();
// 获取渲染器
const renderer = createRenderer();
// 待渲染vue实例
const vm = new Vue({
 data: {
  name: "开课吧"
},
 template: `
  <div >
    <h1>{{name}}</h1>
  </div>
 `
});
app.get("/", async function(req, res) {
 // renderToString可以将vue实例转换为html字符串
 // 若未传递回调函数，则返回Promise
 try {
  const html = await renderer.renderToString(vm);
  res.send(html);
} catch (error) {
  res.status(500).send("Internal Server Error");
}
});
app.listen(3000, () => {
 // eslint-disable-next-line no-console
 console.log("启动成功");
});

三：路由
路由支持仍然使用vue-router
1、安装
若未引入vue-router则需要安装

npm i vue-router -s
vue add router

2、配置
创建@/router/index.js

import Vue from "vue";
import Router from "vue-router";
import Home from "@/views/Home";
import About from "@/views/About";
Vue.use(Router);
//导出工厂函数
export function createRouter() {
 return new Router({
  routes: [
  { path: "/", component: Home },
  { path: "/about", component: About }
 ]
});
}

四：构建
对于客户端应用程序和服务器应用程序，我们都要使用 webpack 打包 - 服务器需要服务器 bundle然后用于服务器端渲染(SSR)，而客户端 bundle会发送给浏览器，用于混合静态标记。
1、构建流程
在这里插入图片描述
2、代码结构

src
├── main.js # 用于创建vue实例
├── entry-client.js # 客户端入口，用于静态内容“激活”
└── entry-server.js # 服务端入口，用于首屏内容渲染

3、Vue实例创建
main.js 是负责创建vue实例，每次请求均会有独立的vue实例创建。创建main.js：

import Vue from "vue";
import App from "./App.vue";
import { createRouter } from "./router";
// 导出Vue实例工厂函数，为每次请求创建独立实例
// 上下文用于给vue实例传递参数
export function createApp(context) {
 const router = createRouter();
 const app = new Vue({
  router,
  context,
  render: h => h(App)
});
 return { app, router };
}

4、服务端入口
服务端入口文件src/entry-server.js

import { createApp } from "./main";
// 返回一个函数，接收请求上下文，返回创建的vue实例
export default context => {
 // 这里返回一个Promise，确保路由或组件准备就绪
 return new Promise((resolve, reject) => {
  const { app, router } = createApp(context);
  // 跳转到首屏的地址
  router.push(context.url);
  // 路由就绪，返回结果
  router.onReady(() => {
   resolve(app);
 }, reject);
});
};

5、客户端入口
客户端入口只需创建vue实例并执行挂载，这一步称为激活。创建entry-client.js：

import { createApp } from "./main";
// 创建vue、router实例
const { app, router } = createApp();
// 路由就绪，执行挂载
router.onReady(() => {
 app.$mount("#app");
});

6、webpack配置
安装依赖

npm install webpack-node-externals lodash.merge -D

具体配置，vue.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 merge = require("lodash.merge");
// 根据传入环境变量决定入口文件和相应配置项
const TARGET_NODE = process.env.WEBPACK_TARGET === "node";
const target = TARGET_NODE ? "server" : "client";
module.exports = {
 css: {
  extract: false
},
 outputDir: './dist/'+target,
 configureWebpack: () => ({
  // 将 entry 指向应用程序的 server / client 文件
  entry: `./src/entry-${target}.js`,
  // 对 bundle renderer 提供 source map 支持
  devtool: 'source-map',
  // target设置为node使webpack以Node适用的方式处理动态导入，
  // 并且还会在编译Vue组件时告知`vue-loader`输出面向服务器代码。
  target: TARGET_NODE ? "node" : "web",
  // 是否模拟node全局变量
  node: TARGET_NODE ? undefined : false,
  output: {
   // 此处使用Node风格导出模块
   libraryTarget: TARGET_NODE ? "commonjs2" : undefined
 },
  // https://webpack.js.org/configuration/externals/#function
  // https://github.com/liady/webpack-node-externals
  // 外置化应用程序依赖模块。可以使服务器构建速度更快，并生成较小的打包文件。
  externals: TARGET_NODE
   ? nodeExternals({
     // 不要外置化webpack需要处理的依赖模块。
     // 可以在这里添加更多的文件类型。例如，未处理 *.vue 原始文件，
     // 还应该将修改`global`（例如polyfill）的依赖模块列入白名单
     whitelist: [/\.css$/]
   })
  : undefined,
  optimization: {
   splitChunks: undefined
 },
  // 这是将服务器的整个输出构建为单个 JSON 文件的插件。
  // 服务端默认文件名为 `vue-ssr-server-bundle.json`
  // 客户端默认文件名为 `vue-ssr-client-manifest.json`。
  plugins: [TARGET_NODE ? new VueSSRServerPlugin() : new VueSSRClientPlugin()]
}),
 chainWebpack: config => {
  // cli4项目添加
  if (TARGET_NODE) {
    config.optimization.delete('splitChunks')
 }
  
  config.module
  .rule("vue")
  .use("vue-loader")
  .tap(options => {
    merge(options, {
     optimizeSSR: false
   });
  });
}
};

7、脚本配置
安装依赖

npm i cross-env -D

定义创建脚本，package.json

"scripts": {
  "build:client": "vue-cli-service build",
  "build:server": "cross-env WEBPACK_TARGET=node vue-cli-service build",
  "build": "npm run build:server && npm run build:client"
},

执行打包：npm run build

8、宿主文件
最后需要定义宿主文件，修改./public/index.html

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>Document</title>
 </head>
 <body>
  <!--vue-ssr-outlet-->
 </body>
</html>

9、服务器启动文件
修改服务器启动文件，现在需要处理所有路由，./server/04-ssr.js

// 加载本地文件
const fs = require("fs");
// 处理url
const path = require("path");
const express = require('express')
const server = express()
// 获取绝对路径
const resolve = dir => {
  return path.resolve(__dirname, dir)
}
// 第 1 步：开放dist/client目录，关闭默认下载index页的选项，不然到不了后面路由
// /index.html
server.use(express.static(resolve('../dist/client'), {index: false}))
// 第 2 步：获得一个createBundleRenderer
const { createBundleRenderer } = require("vue-server-renderer");
// 第 3 步：导入服务端打包文件
const bundle = require(resolve("../dist/server/vue-ssr-server-bundle.json"));
// 第 4 步：创建渲染器
const template = fs.readFileSync(resolve("../public/index.html"), "utf-8");
const clientManifest = require(resolve("../dist/client/vue-ssr-client-
manifest.json"));
const renderer = createBundleRenderer(bundle, {
 runInNewContext: false, // https://ssr.vuejs.org/zh/api/#runinnewcontext
 template, // 宿主文件
 clientManifest // 客户端清单
});
// 路由是通配符，表示所有url都接受
server.get('*', async (req,res)=>{
  console.log(req.url);
 
 // 设置url和title两个重要参数
 const context = {
  title:'ssr test',
  url:req.url // 首屏地址
}
 const html = await renderer.renderToString(context);
 res.send(html)
})
server.listen(3000, function() {
 // eslint-disable-next-line no-console
 console.log(`server started at localhost:${port}`);
});

10、整合Vuex
安装vuex

npm install -S vuex

store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export function createStore () {
 return new Vuex.Store({
  state: {
    count:108
 },
  mutations: {
add(state){
      state.count += 1;
   }
 }
})
}

挂载store，main.js

import { createStore } from './store'
export function createApp (context) {
  // 创建实例
  const store = createStore()
  const app = new Vue({
    store, // 挂载
    render: h => h(App)
 })
  return { app, router, store }
}

使用，.src/components/Index.vue

<h2 @click="$store.commit('add')">{{$store.state.count}}</h2>

11、数据预取
服务器端渲染的是应用程序的"快照"，如果应用依赖于一些异步数据，那么在开始渲染之前，需要先预取和解析好这些数据。
异步数据获取，store/index.js

export function createStore() {
 return new Vuex.Store({
  mutations: {
   // 加一个初始化
   init(state, count) {
    state.count = count;
  },
 },
  actions: {
   // 加一个异步请求count的action
   getCount({ commit }) {
    return new Promise(resolve => {
     setTimeout(() => {
      commit("init", Math.random() * 100);
      resolve();
    }, 1000);
   });
  },
 },
});
}

组件中的数据预取逻辑，Index.vue

export default {
 asyncData({ store, route }) { // 约定预取逻辑编写在预取钩子asyncData中
  // 触发 action 后，返回 Promise 以便确定请求结果
  return store.dispatch("getCount");
}
};

服务端数据预取，entry-server.js

import { createApp } from "./app";
export default context => {
 return new Promise((resolve, reject) => {
  // 拿出store和router实例
  const { app, router, store } = createApp(context);
  router.push(context.url);
  router.onReady(() => {
   // 获取匹配的路由组件数组
   const matchedComponents = router.getMatchedComponents();
   
   // 若无匹配则抛出异常
   if (!matchedComponents.length) {
    return reject({ code: 404 });
  }
  
   // 对所有匹配的路由组件调用可能存在的`asyncData()`
   Promise.all(
    matchedComponents.map(Component => {
     if (Component.asyncData) {
      return Component.asyncData({
       store,
       route: router.currentRoute,
     });
    }
   }),
  )
   .then(() => {
     // 所有预取钩子 resolve 后，
     // store 已经填充入渲染应用所需状态
     // 将状态附加到上下文，且 `template` 选项用于 renderer 时，
     // 状态将自动序列化为 `window.__INITIAL_STATE__`，并注入 HTML。
     context.state = store.state;
     
     resolve(app);
   })
   .catch(reject);
 }, reject);
});
};

客户端在挂载到应用程序之前，store 就应该获取到状态，entry-client.js

// 导出store
const { app, router, store } = createApp();
// 当使用 template 时，context.state 将作为 window.__INITIAL_STATE__ 状态自动嵌入到最
终的 HTML // 在客户端挂载到应用程序之前，store 就应该获取到状态：
if (window.__INITIAL_STATE__) {
 store.replaceState(window.__INITIAL_STATE__);
}

客户端数据预取处理，main.js

Vue.mixin({
 beforeMount() {
  const { asyncData } = this.$options;
  if (asyncData) {
   // 将获取数据操作分配给 promise
   // 以便在组件中，我们可以在数据准备就绪后
   // 通过运行 `this.dataPromise.then(...)` 来执行其他任务
   this.dataPromise = asyncData({
    store: this.$store,
    route: this.$route,
  });
 }
},
});

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/673153.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

ISO C++ 26 并发和并行性重大完善

ISO C++ 26 并发和并行性重大完善

ISO C 委员会举行会议正式通过了 C 26 的时间表。ISO C 标准委员会主席兼微软语言架构师 Herb Sutte&#xff0c;并发和并行小组仍在按计划推进 C26 的 std::execution 和 SIMD 并行 一、 C23 与C 26 开发时间表&#xff1a; 二、C26标准属性三大规则。非正式总结是: [已经在c …
阅读更多...
【Python 基础篇】Python数据序列推导式

【Python 基础篇】Python数据序列推导式

文章目录 前言一、列表推导式二、字典推导式三、集合推导式总结 前言 在Python中&#xff0c;推导式&#xff08;Comprehension&#xff09;是一种简洁而强大的语法&#xff0c;用于快速创建列表、字典和集合。推导式使得在一个简单的语句中就能生成一个新的数据结构&#xff…
阅读更多...
忘记Gmail谷歌账号密码或者密码错误怎么办？用这种方法轻松搞定

忘记Gmail谷歌账号密码或者密码错误怎么办？用这种方法轻松搞定

有些朋友以前注册过谷歌邮箱&#xff0c;但很久很久没有再去使用。现在注册ChatGPT需要谷歌邮箱&#xff0c;于是打算把尘封已久的谷歌邮箱找出来&#xff0c;可是这时候你突然发现&#xff0c;谷歌邮箱的密码忘了。 今天重点来说说如何找回谷歌账号的密码&#xff0c;希望能够…
阅读更多...
英语口语进阶：让你的疲劳与口渴表达更地道

英语口语进阶：让你的疲劳与口渴表达更地道

前言 &#x1f3e0;个人主页&#xff1a;我是沐风晓月 &#x1f9d1;个人简介&#xff1a;大家好&#xff0c;我是沐风晓月&#xff0c;阿里云社区博客专家 &#x1f609;&#x1f609; &#x1f495; 座右铭&#xff1a; 先努力成长自己&#xff0c;再帮助更多的人,一起加油进…
阅读更多...
Web网页制作期末复习（4）——CSS盒子模型、弹性盒模型（flex box)、文档流、浮动、清除浮动、定位、圆角、阴影

Web网页制作期末复习（4）——CSS盒子模型、弹性盒模型（flex box)、文档流、浮动、清除浮动、定位、圆角、阴影

目录 CSS盒子模型 概念 弹性盒模型&#xff08;flex box&#xff09; 内容 父元素上的属性 display属性 flex-direction属性 justify-content属性 align-items属性 子元素上的属性 flex 文档流&#xff08;标准流&#xff09; 浮动 定义 浮动的原理 清除浮动 …
阅读更多...
用OpenCV进行OCR字符分割

用OpenCV进行OCR字符分割

1. 引言 本文重点介绍如何利用传统的图像处理的方法来进行OCR字符切分&#xff0c;进而可以用分割后的单个字符做相应的后续任务&#xff0c;虽然现在计算机视觉依然是卷积神经网络的天下&#xff0c;但是对于一些相对简单的落地场景传统方案还是很有效的。 闲话少说&#xff…
阅读更多...
底盘线控悬架智能化趋势

底盘线控悬架智能化趋势

摘要&#xff1a; 汽车的底盘主要由行驶系、传动系、转向系和制动系四部分组成&#xff0c;其中行驶系又由汽车的车架、车桥、车轮和悬架等系统组成。底盘的悬架系统不仅是汽车重要的组成部分&#xff0c;而且还关乎到一辆汽车在行驶过程中的质感&#xff0c;影响车辆的操控性…
阅读更多...
CSDN周赛59期简要题解

CSDN周赛59期简要题解

本期题目相对比较友好&#xff0c;而且在比赛报名界面还提示了非编程题考察的章节——诚不欺我&#xff1a; 本期非编程题需要选手阅读的章节是第2章“逆向思考——从递推到递归”—2.3节“堆栈和队列&#xff1a;遍历的数据结构” 选择和判断都考到了栈的数据结构&#xff0…
阅读更多...
【MySQL进阶】：子查询与HAVING/SELECT的完美结合

【MySQL进阶】：子查询与HAVING/SELECT的完美结合

前言 ✨欢迎来到小K的MySQL专栏&#xff0c;本节将为大家带来MySQL子查询在HAVING/SELECT字句中使用、及相关子查询和WITH/EXISTS字句的讲解✨ 目录 前言一、在HAVING/SELECT字句中使用子查询二、相关子查询三、WITH/EXISTS、NOT EXISTS字句四、总结 一、在HAVING/SELECT字句中…
阅读更多...
【Python 基础篇】Python 字典及字典常用函数

【Python 基础篇】Python 字典及字典常用函数

文章目录 导言一、字典的创建和访问二、字典的增删改查1、增加元素2、删除元素3、修改元素4、查找元素 三、字典常用函数及操作1、len()2、keys()3、values()4、items()5、字典的遍历 总结 导言 在Python中&#xff0c;字典&#xff08;Dictionary&#xff09;是一种无序的数据…
阅读更多...
使用它或失去它！谷歌即将清理不活跃账号

使用它或失去它！谷歌即将清理不活跃账号

如果你很长时间没有登录你的谷歌账号&#xff0c;最好尽快登录&#xff0c;否则你很可能会失去账号。 2023年5月16号&#xff0c;谷歌宣布&#xff0c;将开始删除至少两年不活跃的账号。 如果谷歌帐户至少两年未被使用或登录&#xff0c;可能会删除该帐户及其内容&#xff0c;包…
阅读更多...
04. 青龙面板通知配置 邮箱 pushPlus 企业微信机器人（保姆级图文）

04. 青龙面板通知配置 邮箱 pushPlus 企业微信机器人（保姆级图文）

目录 1. qq邮箱通知2. pushPlus通知3. 企业微信机器人总结 欢迎关注 『青龙面板』 专栏&#xff0c;持续更新中 欢迎关注 『青龙面板』 专栏&#xff0c;持续更新中 1. qq邮箱通知 emailUser&#xff1a;填写你的邮箱 emailPass&#xff1a;填写邮箱密钥授权码 邮箱密钥获取教…
阅读更多...
【从零开始学习JAVA | 第六篇】面向对象综合训练

【从零开始学习JAVA | 第六篇】面向对象综合训练

目录 前言&#xff1a; 1.文字版格斗游戏&#xff1a; 2.对象数组1 前言&#xff1a; 前面我们已经讲解了JAVA面向程序对象思想的关键要素&#xff1a;封装。我们将利用本篇进行几个小型的练习&#xff0c;帮助我们更好的理解面向对象编程这种思想。 1.文字版格斗游戏&#x…
阅读更多...
C++哈希表

C++哈希表

目录 介绍哈希概念哈希冲突哈希函数解决哈希冲突 闭散列介绍线性探测二次探测负载因子 实现哈希表结构哈希函数元素查找插入元素删除元素 开散列介绍实现哈希表结构元素查找插入元素删除元素析构函数 介绍 哈希概念 了解过搜索二叉树与红黑树后&#xff0c;它们的结构特点主要…
阅读更多...
8.批量消息发送与批量消息消费

8.批量消息发送与批量消息消费

highlight: arduino-light 4.4 批量消息 4.4.1 发送限制 生产者进行消息发送时可以一次发送多条消息&#xff0c;批量发送消息能显著提高传递小消息的性能。 不过需要注意以下几点&#xff1a; 批量发送的消息必须具有相同的Topic批量发送的消息必须具有相同的刷盘策略批量发送…
阅读更多...
统计数组中非零元素的个数统计数组中每列中非零元素的个数统计数组中每行中非零元素的个数numpy.count_nonzero()

统计数组中非零元素的个数统计数组中每列中非零元素的个数统计数组中每行中非零元素的个数numpy.count_nonzero()

【小白从小学Python、C、Java】 【计算机等考500强证书考研】 【Python-数据分析】 统计数组中非零元素的个数 统计数组中每列中非零元素的个数 统计数组中每行中非零元素的个数 numpy.count_nonzero() 选择题 以下说法错误的是? import numpy as np anp.array([[0,1,2,3],[3,…
阅读更多...
文件加密后怎么打开？打开加密文件的方法

文件加密后怎么打开？打开加密文件的方法

当我们把重要文件加密后&#xff0c;可以有效地保护文件数据安全&#xff0c;那么文件加密后该怎么打开使用呢&#xff1f;下面我们就一起来了解一下吧。 EFS加密 作为Windows系统提供的文件加密方法&#xff0c;EFS加密并不需要密码。在我们使用加密时登录的系统账号时&…
阅读更多...
使用HTML制作一个赛龙舟小游戏

使用HTML制作一个赛龙舟小游戏

在这个信息爆炸的时代&#xff0c;开发者们肩负着前所未有的责任与挑战&#xff0c;以屈原名言 路漫漫其修远兮&#xff0c;吾将上下而求索 为指引&#xff0c;使用HTML制作一个赛龙舟小游戏&#xff0c;以此激励广大开发者在技术征途上不断求索&#xff0c;追求极致。 一、前期…
阅读更多...
忘记了谷歌Gmail账号名怎么办？用这种方法轻松找回谷歌邮箱地址

忘记了谷歌Gmail账号名怎么办？用这种方法轻松找回谷歌邮箱地址

有些朋友以前注册过谷歌邮箱&#xff0c;但很久很久没有再去使用。 现在注册ChatGPT需要谷歌邮箱&#xff0c;于是打算把尘封已久的谷歌邮箱找出来&#xff0c;可是这时候你才发现&#xff0c;谷歌邮箱的账号名早已忘掉了。 今天重点来说说如何找回谷歌账号&#xff0c;希望能够…
阅读更多...
ANTLR实战

ANTLR实战

ANTLR&#xff08;Another Tool for Language Recognition&#xff09;是目前非常活跃的语法生成工具&#xff0c;用Java语言编写&#xff0c;基于LL&#xff08;∗&#xff09;解析方式&#xff0c;使用自上而下的递归下降分析方法。ANTLR可以用来产生词法分析器、语法分析器和…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023