vite SSR 超简单的服务端渲染

最新推荐文章于 2025-06-24 00:07:15 发布

BLUESKYHOST

最新推荐文章于 2025-06-24 00:07:15 发布

阅读量3.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vite vue

本文链接：https://blog.youkuaiyun.com/BLUESKYHOST/article/details/119970214

vue 专栏收录该内容

9 篇文章

订阅专栏

本文档介绍了一个基于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"
  }