vite SSR 超简单的服务端渲染

最新推荐文章于 2024-05-20 18:46:24 发布
最新推荐文章于 2024-05-20 18:46:24 发布
阅读量2.9k 收藏 1
点赞数
分类专栏： vue 文章标签： vite vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/BLUESKYHOST/article/details/119970214
版权

项目地址 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"
  }
BLUESKYHOST
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue3使用vite-plugin-ssr实现ssr
dothetrick的博客
05-10 1760
介绍如何使用vite-plugin-ssr实现ssr模式开发一个网站
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: 谢谢 执照
现有vue3+vite项目使用vite-ssr插件进行ssr渲染
weixin_44536001的博客
06-13 3239
将打包后的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.添加插件到现有项目。
如何使用vite，做vue3.0的服务端渲染(ssr)
热门推荐
Emperor灬fly的博客
02-24 1万+
新春伊始，想必在座的各位都正在嗷嗷待哺的等待需求中(ps:划水摸鱼)，不好意思，理直气壮的说我也是。几天鱼摸下来，心里也不是滋味，看着身边的同学一个个每天都在学这学那，搞得我也不是很好意思。于是趁着现在各种完全体的方案和框架还没出来之前，那我们把vue3.0的服务端搭一搭吧，自己写写还是很有意思的。 好了，废话就先到此，开局调研了基于webpack和vue-cli去搭，途中碰到了一些问题就放弃了，由于尤大最近很痴迷于vite，vue-cli相关的生态也有些滞后。于是反手就一手vite搞起，看看到底有什么魔力
对现有的vue3+vite+ts项目采用vike（原vite-plugin-ssr）ssg化
m0_56245485的博客
05-20 1035
这里还想表扬一下自己的文件、文件夹命名、代码都很清晰，组件和视图也分明，所以给views里面的文件改名的时候，很快就改完且没有冲突，给组件套上ClientOnly也很容易定位到什么组件。另外，推荐vue使用3.4.27版本（修复了样式属性水合的bug，我是使用了postcss-px-to-viewport里面的selectorBlackList（需要忽略的CSS选择器），才发现原来的vue有这个bug的，没想到刚好最新版本的vue修复了）参考：1.2.3.4.5.
如何把控全站静态，比较一下nuxt3 和 vite-plugin-ssr
oyksoft的博客
08-13 1576
vue3的nuxt3和vite-plugin-ssr的SSR和SSG方案的对比。
了解Vue3预渲染
前端咸鱼翻身的博客
05-30 5012
预渲染可以显著改善网站的性能，本文将介绍什么是预渲染，以及如何使用Vue插件在网站中应用它
vite预渲染怎么实现
朱远辉的博客
05-08 2055
vite预渲染怎么实现？预渲染文件只是在构建时生成的静态 HTML 文件，将这些文件放置在服务器上供用户请求时直接访问。预渲染后的 HTML 文件不需要再依赖 JavaScript 去渲染页面，它已经包含了预处理后的 HTML、CSS 和 JS 等信息，可以直接在浏览器中打开预渲染文件，即可看到完整的网页内容和结构。因此，预渲染文件也被称为静态 HTML 文件。
vue ssr+koa2构建服务端渲染的示例代码
10-15
主要介绍了vue ssr+koa2构建服务端渲染的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Egg Vue SSR 服务端渲染数据请求与asyncData
12-13
服务端渲染 Node 层直接获取数据 在 Egg 项目如果使用模板引擎规范时通是过 render 方法进行模板渲染，render 的第一个参数模板路径，第二个参数时模板渲染数据. 如如下调用方式： async index(ctx) { // 获取...
基于Nuxt3 + Vue3 + NaiveUI+ Vite实战开发在线教育SSR服务端渲染网站应用.zip
03-03
基于Nuxt3 + Vue3 + NaiveUI+ Vite实战开发在线教育SSR服务端渲染网站应用.zip 二、项目内容 项目包括：图文、音频、视频、电子书、用户、直播、问答社区、考试、拼团秒杀、优惠券模块及微信扫码支付以及（部分）...
Vite SSR插件。 简单，成熟，一劳永逸。-JavaScript开发
05-26
vite-plugin-ssr简单，成熟，一劳永逸。 简介Vue Tour React Tour入门•样板•Manua vite-plugin-ssr简单，成熟，一劳永逸。 简介Vue Tour React Tour入门•样板•手动安装指南•数据提取•路由•身份验证•HTML
webpack4 配置 ssr 环境遇到“document is not defined”
01-21
最近使用 webpack 4 配置 ssr 环境，发现的问题： ReferenceError: document is not defined 本次package.json使用版本...在服务端渲染打包的配置中使用了mini-css-extract-plugin是的server bundle中会使用到document
vite-design:初步构建工具vite文档翻译原始解析
03-23
Vite的模块加载解析机制Vite的预优化机制Vite的HMR（热替换）机制如果觉得对你有帮助，麻烦点个Star :sparkles:地球上最强的SSR框架顺便安利下我开发的地球上最强的，将会支持Vue3 + Vite实现SSR服务端渲染功能
毕业设计之在线教育SSR网站（全部源码+部署文档）
最新发布
06-24
基于Nuxt3 + Vue3 + NaiveUI+ Vite实战开发在线教育SSR服务端渲染网站应用。 二、项目内容 项目包括：图文、音频、视频、电子书、用户、直播、问答社区、考试、拼团秒杀、优惠券模块及微信扫码支付以及（部分）性能...
基于Vite+Vue3+TS+Nuxt3的仿爱彼迎网站源码.zip
06-21
它简化了Vue应用的SSR流程，提供了开箱即用的特性，如代码分割、路由管理、服务端渲染等。在本项目中，Nuxt3帮助实现了Airbnb网站的动态加载和SEO友好特性。 五、项目结构与文件解析 在压缩包中的"12-Airbnb-master...
vite 插件
qq_38552198的博客
05-12 918
vite plugin
vite-ssr
Aucanon的博客
07-19 126
还有就是在使用 ElementUI-Plus 的时候有些组件是无法在 ssr 中使用的。就目前而至的有（el-popover、el-menu、el-table）。如果使用的话可以使用标签进行包裹，就不会再服务端进行渲染。该功能是使用 node 服务器进行代理，所以在 node 中没有 ES 中相应的 document、windows、localStorage 等对象所以使用其相应的方法就需要注意，或者可以对这些方法进行一些手动的封装。但是看了下别人的好像还可以用一个插件进行处理。
从0到1塔建vite+vue3的ssr的服务端渲染的使用方法，不使用ts
06-08
好的，我会根据您的要求回答您的问题，以下是从0到1塔建vite+vue3的ssr的服务端渲染的使用方法，不使用ts： 1. 首先，安装Vite和Vue3 ``` npm install -g vite npm install vue@next ``` 2. 创建项目并初始化 ``` mkdir my-ssr-app cd my-ssr-app npm init -y ``` 3. 安装依赖 ``` npm install vue-server-renderer express ``` 4. 创建服务端入口文件 在项目根目录下创建`server.js`文件，并添加以下内容： ```javascript const express = require('express') const { createRenderer } = require('vue-server-renderer') const { createApp } = require('./src/main') const app = express() // 静态资源目录 app.use(express.static('dist')) const renderer = createRenderer() app.get('*', async (req, res) => { const app = createApp() const html = await renderer.renderToString(app) res.end(` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>SSR Vite Vue 3</title> </head> <body> <div id="app">${html}</div> <script src="/client.js"></script> </body> </html> `) }) app.listen(3000, () => { console.log('Server started at http://localhost:3000') }) ``` 5. 创建客户端入口文件 在项目根目录下创建`src/main.js`文件，并添加以下内容： ```javascript import { createApp } from 'vue' import App from './App.vue' export function createApp () { const app = createApp(App) return { app } } ``` 6. 配置Vite 在项目根目录下创建`vite.config.js`文件，并添加以下内容： ```javascript const { createVuePlugin } = require('vite-plugin-vue2') module.exports = { plugins: [ createVuePlugin() ], build: { ssrManifest: true, outDir: 'dist', rollupOptions: { input: 'src/entry-client.js', output: { format: 'esm', entryFileNames: '[name]-[hash].js' } } }, optimizeDeps: { include: [ 'vue', 'vue-router' ] } } ``` 7. 创建组件 在`src`文件夹下创建`App.vue`文件，并添加以下内容： ```vue <template> <div> <h1>{{ message }}</h1> </div> </template> <script> export default { data () { return { message: 'Hello World!' } } } </script> ``` 8. 运行项目 使用以下命令启动项目： ``` vite build && node server.js ``` 9. 查看效果 在浏览器中访问`http://localhost:3000`，即可看到页面渲染结果。 以上就是从0到1塔建vite+vue3的ssr的服务端渲染的使用方法，不使用ts的步骤。希望对您有所帮助！
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值