vite SSR 超简单的服务端渲染

最新推荐文章于 2025-09-27 11:59:07 发布

原创最新推荐文章于 2025-09-27 11:59:07 发布 · 3.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vite #vue

vue 专栏收录该内容

9 篇文章

订阅专栏

本文档介绍了一个基于Vite的SSR项目，包括项目地址、安装步骤、运行方式以及目录结构。项目使用了Vite、Vue3、Vue Router、Vuex等技术栈，打包后通过`server.js`在Node Express上运行。此外，还详细列出了所使用的依赖包，如@vue/server-renderer、vite-ssr等。此项目对于想要了解Vite SSR开发流程的开发者具有参考价值。

项目地址 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"
  }