vite SSR 超简单的服务端渲染

最新推荐文章于 2024-07-18 10:06:12 发布
最新推荐文章于 2024-07-18 10:06:12 发布
阅读量3.1k 收藏 1
点赞数
分类专栏： vue 文章标签： vite vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/BLUESKYHOST/article/details/119970214
版权
本文档介绍了一个基于Vite的SSR项目，包括项目地址、安装步骤、运行方式以及目录结构。项目使用了Vite、Vue3、Vue Router、Vuex等技术栈，打包后通过`server.js`在Node Express上运行。此外，还详细列出了所使用的依赖包，如@vue/server-renderer、vite-ssr等。此项目对于想要了解Vite SSR开发流程的开发者具有参考价值。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

项目地址 https://gitee.com/blueskyliu/vite-ssr

效果图

在这里插入图片描述

使用

安装

yarn

运行

yarn dev  //开发模式运行
yarn build //打包

目录结构

  • dist 打包目录
  • server.js 打包后的node express 运行脚本【build后使用这个进行部署

剩余的目录结构内容与 vue 没什莫大的区别

使用插件

 "dependencies": {
    "@vue/server-renderer": "^3.2.6",
    "@vueuse/head": "^0.6.0",
    "express": "^4.17.1",
    "vite-ssr": "^0.13.0",
    "vue": "^3.2.6",
    "vue-router": "4",
    "vuex": "^4.0.2"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^1.6.0",
    "@vue/compiler-sfc": "^3.0.5",
    "vite": "^2.5.1"
  }
vue3使用vite-plugin-ssr实现ssr
dothetrick的博客
05-10 2357
介绍如何使用vite-plugin-ssr实现ssr模式开发一个网站
Vue.js 服务端渲染（SSR）和静态站点生成
最新发布
02-14 1259
服务端渲染（Server-Side Rendering, SSR）是指在服务器端将 Vue 组件和路由预渲染为 HTML 字符串，并将其返回给浏览器。静态站点生成（Static Site Generation, SSG）是一种将动态内容预渲染为静态 HTML 文件的技术。
Vite SSR插件。 简单，成熟，一劳永逸。-JavaScript开发
05-26
vite-plugin-ssr简单，成熟，一劳永逸。 简介Vue Tour React Tour入门•样板•Manua vite-plugin-ssr简单，成熟，一劳永逸。 简介Vue Tour React Tour入门•样板•手动安装指南•数据提取•路由•身份验证•HTML
现有vue3+vite项目使用vite-ssr插件进行ssr渲染
weixin_44536001的博客
06-13 4718
将打包后的dist文件夹、package.json、server.js 文件同级放在服务器环境目录下（服务器要支持node环境） 执行 npm install 依赖包加载完成后 执行npm start 即可。8.打包后会dist中会产生两个文件夹client和server 可以直接npm start 通过server.js 本地启动看是否能正常访问如果没有问题就可以执行服务端的部署访问功能。7.配置服务端启动文件server.js 放在vite.config.ts同级。1.添加插件到现有项目。
svelte-vite-ssr
07-24
svelte-vite-ssr 一个 Svelte 项目模板，具有强大的路由器、SSR（服务器端渲染）、CSR（客户端渲染）、HMR（热模块替换）、 <link rel="preload">指令和其他不错的功能。 演示 使用托管在 Netlify 上的 AWS Lambda 函数的 SSR。 链接： : Git： : 命令 从模板创建项目 在您的项目文件夹中： npm init svelte-vite-ssr npm install 在 SSR 模式下运行（开发） npm run dev:ssr 以 CSR 模式运行 (dev) npm run dev:csr 构建 SSR npm run build:ssr 建立企业社会责任 npm run build:csr 运行 SSR（生产） npm run serve:ssr 运行 CSR（预览） 在生产中，您应该使用 n
vite-plugin-ssr-ssg:适用于SSR和SSG的Vite插件
03-25
vite-plugin-ssr-ssg 适用于跨框架SSR和SSG的Vite插件 :sparkles: 特征 声明式入口点 适用于跨框架的简单命令 方便的设置脚本 自动页面生成 在SSR和CSR中预览 :dizzy: 快速开始 在您的项目中 yarn add -D vite-plugin-ssr-ssg yarn vite-ssrg init :shamrock: 支持 框架的支持状态如下。 React 皮特 Vue Card.svelte 轻元素 香草 :check_mark_button: 去做 下一个频道是Beta。 自动检测动态路由和嵌套路由 通过插件配置动态生成路由 开发环境中的标签头预加载 页面异步加载 整体单元测试 支持与Vite相同的CLI 苗条的支持 :green_heart: 谢谢 执照
基于Nuxt3 + Vue3 + NaiveUI+ Vite实战开发在线教育SSR服务端渲染网站应用.zip
03-03
基于Nuxt3 + Vue3 + NaiveUI+ Vite实战开发在线教育SSR服务端渲染网站应用.zip 二、项目内容 项目包括：图文、音频、视频、电子书、用户、直播、问答社区、考试、拼团秒杀、优惠券模块及微信扫码支付以及（部分）...
Egg Vue SSR 服务端渲染数据请求与asyncData
10-15
Egg Vue SSR 是一个结合了Egg.js框架和Vue.js的SSR解决方案，本文将深入探讨如何在Egg Vue SSR 中进行数据请求，并利用`asyncData`方法优化服务端渲染的数据获取。 1. **服务端渲染基础** 在Egg.js项目中，服务端...
vue ssr+koa2构建服务端渲染的示例代码
10-15
主要介绍了vue ssr+koa2构建服务端渲染的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vite-ssr
Aucanon的博客
07-19 228
还有就是在使用 ElementUI-Plus 的时候有些组件是无法在 ssr 中使用的。就目前而至的有（el-popover、el-menu、el-table）。如果使用的话可以使用标签进行包裹，就不会再服务端进行渲染。该功能是使用 node 服务器进行代理，所以在 node 中没有 ES 中相应的 document、windows、localStorage 等对象所以使用其相应的方法就需要注意，或者可以对这些方法进行一些手动的封装。但是看了下别人的好像还可以用一个插件进行处理。
:camping:带有SSR的果断Vite入门模板-Vue.js开发
05-27
with带有SSR Vitesse的自以为是的Vite入门模板SSR Vue + Vite + SSR模板基于@antfu的带有vite-ssr的Vitesse。 实时演示功能:high_voltage:Vue 3，Vite 2，pnpm，ESBuild-带有牢固性:card_index_dividers:基于文件的路由:package:组件自动导入:bookmark_tabs:布局系统:mobile_phone_with_arrow:PWA:artist_palette:Windi CSS-快速的点播Tailwind CSS:grinning_face_with_big_eyes:使用任何图标集中的图标毫不妥协:globe_showing_Europe-Africa:已准备好I18n:spiral_notepad:降价支持:fire:使用新
从0到1使用Vite创建一个SSR模版项目
军火库
02-01 1355
最近找到一个VUE的文档，它将VUE的各个知识点进行了总结，整理成了《Vue 开发必须知道的36个技巧》。内容比较详实，对各个知识点的讲解也十分到位。
使用Vite 搭建高可用的服务端渲染SSR工程
xiangzhihong8的专栏
06-28 1873
在非常早期的 Web 开发中，大家还在使用 JSP 这种古老的模板语法来编写前端的页面，然后直接将 JSP 文件放到服务端，在服务端填入数据并渲染出完整的页面内容，可以说那个时代的做法是天然的服务端渲染。但随着 AJAX 技术的成熟以及各种前端框架(如 Vue、React)的兴起，前后端分离的开发模式逐渐成为常态，前端只负责页面 UI 及逻辑的开发，而服务端只负责提供数据接口，这种开发方式下的页面渲染也叫客户端渲染(Client Side Render，简称 CSR)。
Vite与Vue 3的SSR实践
偏执的小男孩儿
04-27 1067
Vite是一个基于ES模块的构建工具，提供了快速的开发体验。Vue 3是一套用于构建用户界面的渐进式JavaScript框架。Vite与Vue 3的结合可以实现服务器端渲染（SSR）的应用。这样，就可以在本地的3000端口启动一个服务器端渲染的Vue 3应用了。创建一个新的Vue 3项目，可以使用Vue CLI等工具来创建。安装Vite作为项目的构建工具，可以使用npm或yarn来安装。
vite ssr服务端渲染
ZhuAiQuan的博客
03-13 1699
阅读这一章里有说过，vue是支持服务端渲染的。通过创建vue组件实例，并使用将在服务器渲染好template并返回字符串结构，通过替换占位字符将渲染好的字符串输出到html上，这样的一个过程就实现了服务端渲染。也提到了如何去渲染SSR并提供了相关那么今天我们就按照官方给的示例来完成vue ssr的改造使用Node Koa框架来做服务器，且使用vue全家桶（router,pinia）开发项目。
Vue 3 + Vite + SSR
苦行虚空的博客
08-23 3624
关于 vue 服务端渲染，我之前发过一篇文章，用的是无头浏览器（puppeteer），其本质是使用浏览器渲染后返回给蜘蛛爬虫，比较消耗服务器资源。后来我在实际项目中，使用了第三方框架 NUXT，总的来说还是这个框架还是不错的，但是在个性化定制方面不好控制，还有一个问题是到目前为止仍未支持 vue 3。前段时间要开发新项目，索性自己搭建 SSR 服务，从 vite 的 ssr 示例里抄了代码，然后自己的想法一点点优化至目前这样子，这两天整理了一下，把代码放到了码云上。技术水平有限，欢迎各位大佬指正。 ...
SSR理解（vite与nuxt比较）
2401_85955297的博客
07-18 2254
SSR理解（vite与nuxt）
推荐文章：探索Vike - 轻量级的Vite SSR插件
gitblog_00076的博客
05-11 983
推荐文章：探索Vike - 轻量级的Vite SSR插件 vike???? Like Next.js / Nuxt but as do-one-thing-do-it-well Vite plugin.项目地址:https://gitcode.com/gh_mirrors/vi/vike 1、项目介绍 Vike，前身为vite-plugin-ssr，是一个轻量级且高效的Vite插件，它旨在提供类似Ne...
如何使用vite，做vue3.0的服务端渲染(ssr)
热门推荐
Emperor灬fly的博客
02-24 1万+
新春伊始，想必在座的各位都正在嗷嗷待哺的等待需求中(ps:划水摸鱼)，不好意思，理直气壮的说我也是。几天鱼摸下来，心里也不是滋味，看着身边的同学一个个每天都在学这学那，搞得我也不是很好意思。于是趁着现在各种完全体的方案和框架还没出来之前，那我们把vue3.0的服务端搭一搭吧，自己写写还是很有意思的。 好了，废话就先到此，开局调研了基于webpack和vue-cli去搭，途中碰到了一些问题就放弃了，由于尤大最近很痴迷于vite，vue-cli相关的生态也有些滞后。于是反手就一手vite搞起，看看到底有什么魔力
nest + vue + vite 服务端渲染
01-01
### 使用 Nest.js 和 Vue.js 结合 Vite 实现服务端渲染 (SSR) #### 项目初始化 为了创建一个支持 SSR 的应用，首先需要安装必要的依赖项并配置环境。 ```bash npm init vite@latest my-vue-app --template vue cd my-vue-app npm install ``` 接着，在 `my-vue-app` 文件夹内启动一个新的终端窗口，并设置 NestJS 后端： ```bash npx @nestjs/cli new server cd server npm install ``` #### 安装额外的库 为了让两个框架协同工作，还需要一些辅助工具。在前端部分添加如下命令以获取所需模块： ```bash npm install vue-server-renderer express ``` 对于后端，则需引入适配器以便更好地集成 Express: ```bash npm i --save @nestjs/platform-express ``` #### 配置 Vite 构建过程 编辑项目的根目录下的 `vite.config.ts`, 添加对服务器端的支持选项： ```typescript import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' export default defineConfig({ plugins: [ vue(), ], ssr: { noExternal: ['vue'], }, }) ``` 此配置允许 Vite 处理来自 Node.js 环境中的请求[^1]。 #### 创建入口文件 为区分客户端和服务端逻辑，建议分别建立独立的应用起点。于 `/src/entry-client.ts` 中定义标准Vue实例用于浏览器加载；而在 `/src/entry-server.ts` 则负责处理初次页面访问时的数据预取与HTML组装。 ##### entry-client.ts ```javascript import { createApp } from './main'; createApp().mount('#app'); ``` ##### entry-server.ts ```javascript import { renderToString } from "vue/server-renderer"; import { createApp } from "./main"; export async function render(url) { const app = createApp(); return await renderToString(app); } ``` 上述代码片段展示了如何利用 `vue/server-renderer` 将应用程序转换成字符串形式返回给用户代理设备[^2]。 #### 整合至 NestJS API 路由 最后一步是在 NestJS 控制器里注册一条新路径用来触发 SSR 流程。打开位于 `server/src/app.controller.ts` 的控制器类，加入下面的方法实现： ```typescript import { Controller, Get, Res } from "@nestjs/common"; import { Response } from "express"; import { render } from "../dist/ssr"; // 假设已编译好 @Controller() export class AppController { @Get("*") public async index(@Res() res: Response): Promise<void> { try { const content = await render(); res.send(` <!DOCTYPE html> <html lang="en"> <head><title>Hello</title></head> <body>${content}</body> </html> `); } catch (err) { console.error(err); res.status(500).send('Internal Server Error'); } } } ``` 这段 TypeScript 函数接收任意 URL 请求并通过调用先前准备好的 `render()` 方法完成整个流程[^3]。 通过以上步骤，已经成功搭建了一个简单的基于 Nest.js 和 Vue.js 并借助 Vite 进行优化的服务端渲染架构。当然实际生产环境中可能还会涉及到更多细节调整和技术选型考量。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值