个人建站前端篇(二)项目采用服务端渲染SSR

SSR的优点

  1. 更好的SEO
  2. 首屏加载速度更快,用户体验更好
  3. 可以使用相同的语言以及相同的声明式、面向组件的心智模型来开发整个应用,而不需要在后端模板系统和前端框架之间来回切换。

Vue生态中的SSR通用解决方案

  • Nuxt是一个构建于 Vue 生态系统之上的全栈框架
  • Quasar是基于 Vue 的完整解决方案
  • Vite 提供了内置的 Vue 服务端渲染支持,插件使用vite-plugin-ssr
    这里采用vite进行ssr改造

项目改造

安装开发服务器所需依赖

  • sirv 是一个优化过的轻量级中间件,用来处理静态资源请求
  • compression 是一个 Node.js 的中间件,用来对 HTTP 响应进行压缩
  • express 是 Node.js 的一个轻量级的 Web 服务器框架
  • cross-env 是一个跨平台的环境变量设置和使用工具
  • vite-plugin-ssr 是一个 Vite 插件,用于在 Vue 应用中启用服务端渲染(SSR)
    执行以下命令安装依赖:
npm install sirv compression express cross-env -D

接下来对于package.json中的构建命令进行改造

"scripts": {"dev": "node server","build": "npm run build:client && npm run build:server","build:client": "vite build --ssrManifest --outDir dist/client","build:server": "vite build --ssr src/entry-server.ts --outDir dist/server","preview": "cross-env NODE_ENV=production node server"
}

进行代码改造,在 src 目录下新建entry-client.ts和entry-server.ts两个入口文件。
其中entry-client.ts文件内容如下

import './style.css'
import { createApp } from './main'
const { app } = createApp()
app.mount('#app')

entry-server.ts文件内容如下

import { renderToString } from 'vue/server-renderer'
import { createApp } from './main'
export async function render() {const { app } = createApp()const ctx = {}const html = await renderToString(app, ctx)return { html }
}

修改main.ts文件,将Vue应用的入口文件改为entry-server.ts。

import { createSSRApp } from 'vue'
import App from './App.vue'
export function createApp() {const app = createSSRApp(App)return { app }
}

修改index.html引入入口js路径

<div id="app"><!--app-html--></div>
<script type="module" src="/src/entry-client.ts"></script>

提示

重点来了,和不是单纯的注释,而是占位符,需要替换成实际的内容。 这里和server.js里面的设置向对应

最后在项目根目录新建启动文件server.js

import fs from 'node:fs/promises'
import express from 'express'// Constants
const isProduction = process.env.NODE_ENV === 'production'
const port = process.env.PORT || 3000
const base = process.env.BASE || '/'// Cached production assets
const templateHtml = isProduction? await fs.readFile('./dist/client/index.html', 'utf-8'): ''
const ssrManifest = isProduction? await fs.readFile('./dist/client/.vite/ssr-manifest.json', 'utf-8'): undefined// Create http server
const app = express()// Add Vite or respective production middlewares
let vite
if (!isProduction) {const { createServer } = await import('vite')vite = await createServer({server: { middlewareMode: true },appType: 'custom',base})app.use(vite.middlewares)
} else {const compression = (await import('compression')).defaultconst sirv = (await import('sirv')).defaultapp.use(compression())app.use(base, sirv('./dist/client', { extensions: [] }))
}// Serve HTML
app.use('*', async (req, res) => {try {const url = req.originalUrl.replace(base, '')let templatelet renderif (!isProduction) {// Always read fresh template in developmenttemplate = await fs.readFile('./index.html', 'utf-8')template = await vite.transformIndexHtml(url, template)render = (await vite.ssrLoadModule('/src/entry-server.ts')).render} else {template = templateHtmlrender = (await import('./dist/server/entry-server.js')).render}const rendered = await render(url, ssrManifest)const html = template.replace(`<!--app-head-->`, rendered.head ?? '').replace(`<!--app-html-->`, rendered.html ?? '')res.status(200).set({ 'Content-Type': 'text/html' }).end(html)} catch (e) {vite?.ssrFixStacktrace(e)console.log(e.stack)res.status(500).end(e.stack)}
})// Start http server
app.listen(port, () => {console.log(`Server started at http://localhost:${port}`)
})

运行npm run dev启动项目,查看源代码
如下图id为app的div标签中出现对应的内容就证明实现ssr了
在这里插入图片描述

最后将项目部署到生产环境上,执行npm run build打包
将dist文件夹/package.json/server.js部署到node服务上,启动服务,访问项目,查看效果。
在这里插入图片描述
在这里插入图片描述

提示

如果不清楚如何部署node项目到服务,可以去看云风的知识库,里面有详细步骤

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

springboot 整合 PowerJob实现定时任务调度

最近项目需要使用定时任务&#xff0c;而使用了PowerJob做任务调度模块&#xff0c;感觉这个框架真香&#xff0c;今天我们就来深入了解一下新一代的定时任务框架——PowerJob&#xff01; 简介 PowerJob是基于java开发的企业级的分布式任务调度平台&#xff0c;与xxl-job一样…

10个React状态管理库推荐

本文将为您推荐十款实用的React状态管理库&#xff0c;帮助您打造出高效、可维护的前端应用。让我们一起看看这些库的魅力所在&#xff01; 在前端开发中&#xff0c;状态管理是至关重要的一环。React作为一款流行的前端框架&#xff0c;其强大的状态管理功能备受开发者青睐。…

2.2学习总结

2.2 1.⼀和零 2.零钱兑换II 3.组合总和 Ⅳ 4.零钱兑换 5.完全平⽅数 6.封印 7.杨辉三角形 8.卡牌 9.最大子段和 题1&#xff1a;https://leetcode.cn/problems/ones-and-zeroes/description/ 01背包问题&#xff0c;其中m&#xff0c;n分别是背包的容量&#xff0c;s字符串中…

力扣hot100 二叉树的右视图 DFS BFS 层序遍历 递归

Problem: 199. 二叉树的右视图 文章目录 思路&#x1f496; BFS&#x1f496; DFS 思路 &#x1f469;‍&#x1f3eb; 甜姨 &#x1f496; BFS ⏰ 时间复杂度: O ( n ) O(n) O(n) &#x1f30e; 空间复杂度: O ( n ) O(n) O(n) class Solution {public List<Integer&…

NFT Insider #119:The Sandbox 举办VoxEdit 战士装备设计比赛,周星驰 Nobody NFT开启铸造

引言&#xff1a;NFT Insider由NFT收藏组织WHALE Members &#xff08;https://twitter.com/WHALEMembers&#xff09;、BeepCrypto &#xff08;https://twitter.com/beep_crypto&#xff09;联合出品&#xff0c;浓缩每周NFT新闻&#xff0c;为大家带来关于NFT最全面、最新鲜…

【Android】高仿京东三级类型列表Demo

本demo基于二级分类双列表联动Demo进行了改进&#xff0c;高仿实现了京东的三级类型列表。 京东的如图&#xff1a; 本demo的&#xff1a; 改进之处 实现了三级列表联动&#xff0c;二三级列表之间的滑动监听优化了一下&#xff0c;将二级类型选中交予自身的点击事件&#…

IDEA如何进行远程Debug调试

背景&#xff1a; 使用docker进行CVE漏洞复现的时候&#xff0c;由于只能黑盒进行复现&#xff0c;并不能知道为什么会产生这个漏洞&#xff0c;以及漏洞的POC为什么要这么写&#xff0c;之前我都是通过本地debug来进行源码分析&#xff0c;后来搜了一下&#xff0c;发现可以进…

day36 无重叠区间 划分字母区间 合并区间

题目1&#xff1a;435 无重叠区间 题目链接&#xff1a;435 无重叠区间 题意 intervals[i][starti&#xff0c;endi] 移除区间&#xff0c;使得区间互不重叠&#xff0c;返回移除区间的最小数量 相邻区间挨在一起&#xff0c;尽量移除重叠区间 代码 class Solution { publ…

HCIP-Datacom(H12-821)81-90题解析

有需要完整题库的同学可以私信博主&#xff0c;博主看到会回复将文件发给你&#xff01;&#xff08;麻烦各位同学给博主推文点赞关注和收藏哦&#xff09; 81、在状态检测防火墙中&#xff0c;开启状态检测机制时&#xff0c;三次握手的第二个报文(SYNACK)到达防火墙的时候如…

Qt实现窗口吸附屏幕边缘 自动收缩

先看效果&#xff1a; N年前的QQ就可以吸附到屏幕边缘&#xff0c;聊天时候非常方便&#xff0c;不用点击状态栏图标即可呼出QQ界面 自己尝试做了一个糙版的屏幕吸附效果。 关键代码&#xff1a; void Widget::mouseMoveEvent(QMouseEvent *e) {int dx e->globalX() - l…

户外没有电源和网络,但需要安装监控系统,怎么办?太阳能智能监控系统给你解决

近期有粉丝给小编求助&#xff1a;需要在没网没电的户外进行智能监控的安装&#xff0c;不知道如何解决。收到粉丝的问题&#xff0c;小编立刻联系了技术人员给出方案。针对野外、户外等场景只需使用太阳能供电模组4G摄像机视频监控EasyCVR平台智能分析网关V4的架构&#xff0c…

《统计学习方法:李航》笔记 从原理到实现(基于python)-- 第5章 决策树

文章目录 第5章 决策树5.1 决策树模型与学习5.1.1 决策树模型5.1.2 决策树与if-then规则5.1.3 决策树与条件概率分布5.1.4 决策树学习5.2 特征选择5.2.1 特征选择问题5.2.2 信息增益5.2.3 信息增益比5.3.1 ID3算法5.3.2 C4.5的生成算法5.4 决策树的剪枝5.5 CART算法5.5.1 CART生…

20240202在Ubuntu20.04.6下使用whisper.cpp的CPU模式

20240202在Ubuntu20.04.6下使用whisper.cpp的CPU模式 2024/2/2 14:15 rootrootrootroot-X99-Turbo:~/whisper.cpp$ ./main -l zh -osrt -m models/ggml-medium.bin chs.wav 在纯CPU模式下&#xff0c;使用medium中等模型&#xff0c;7分钟的中文视频需要851829.69 ms&#xf…

常见的图形化编程工具都有什么

图形化编程是一种通过可视化界面和模块化组件来进行程序设计的方法&#xff0c;它使得编程更加直观和易于理解&#xff0c;尤其适合初学者和儿童学习编程。在这篇文章中&#xff0c;6547网题库将介绍图形化编程的基本概念、优势以及一些常见的图形化编程工具。 一、图形化编程的…

CAD-autolisp(三)——文件、对话框

目录 一、文件操作1.1 写文件1.2 读文件 二、对话框DCL2.1 初识对话框2.2 常用对话框界面2.2.1 复选框、列表框2.2.2 下拉框2.2.3 文字输入框、单选点框 2.3 Lisp对dcl的驱动2.4 对话框按钮实现拾取2.5 对话框加载图片2.5.1 幻灯片图片制作2.5.1 代码部分 一、文件操作 1.1 写…

密钥加密问题

C参考代码&#xff1a; #include<iostream> #include<map> #include<vector> using namespace std; int main() {vector<char> x;vector<char> y;map<char,char> word;char ch getchar();getchar();string str;getline(cin,str);for(cha…

GmSSL - GmSSL的编译、安装和命令行基本指令

文章目录 Pre下载源代码(zip)编译与安装SM4加密解密SM3摘要SM2签名及验签SM2加密及解密生成SM2根证书rootcakey.pem及CA证书cakey.pem使用CA证书签发签名证书和加密证书将签名证书和ca证书合并为服务端证书certs.pem&#xff0c;并验证查看证书内容&#xff1a; Pre Java - 一…

JDK版本如何在IDEA中切换

JDK版本在IDEA中切换 一、项目结构设置 1.Platform——Settings 项目结构---SDKS 2.Project——SDK 3.Modules——SDK——Sources 4.Modules——SDK——Dependencies 二、设置--编译--字节码版本 Settings——Build,——Java Compiler

【Servlet】——Servlet API 详解

个人主页&#xff1a;兜里有颗棉花糖 欢迎 点赞&#x1f44d; 收藏✨ 留言✉ 加关注&#x1f493;本文由 兜里有颗棉花糖 原创 收录于专栏【Servlet】 本专栏旨在分享学习Servlet的一点学习心得&#xff0c;欢迎大家在评论区交流讨论&#x1f48c; 目录 一、HttpServlet二、Htt…

spring boot yaml文件中如何设置duration对象值

Spring Boot对表示持续时间有专门的支持。如果您公开java.time.Duration属性&#xff0c;则应用程序对应Duration类型的属性有以下格式可用: long类型的常规表示(使用毫秒作为默认单位&#xff0c;除非指定了DurationUnit)java.time.Duration 使用的标准ISO-8601格式其中值和单…