vue3+ts+vite5创建ssr项目

### 创建带有Vue 3、TypeScript和Vite 5的服务器端渲染（SSR）项目 为了创建一个支持服务器端渲染（SSR）的Vue 3应用，使用TypeScript作为编程语言以及Vite 5作为构建工具，可以遵循如下方法： #### 初始化项目结构 首先安装`vite-plugin-vue2-ssr`插件来辅助设置SSR环境。然而对于Vue 3而言，应该关注官方推荐的方式或是社区内成熟的解决方案。 ```bash npm init vite@latest my-ssr-app --template vue-ts cd my-ssr-app ``` 这会基于模板初始化一个新的项目，其中包含了基本配置文件和支持TypeScript的基础架构[^1]。 #### 安装依赖项 接着增加必要的依赖包用于实现服务端渲染功能： ```bash npm install @vue/server-renderer express ``` 这里引入了两个主要组件：一个是来自Vue团队专门为Vue设计的服务端渲染器；另一个是Express框架，用来搭建Node.js HTTP服务器并处理请求响应逻辑。 #### 修改入口文件 调整客户端启动脚本，在`main.ts`里仅保留根实例挂载部分，并移除任何与DOM操作有关的内容以便兼容服务端执行上下文。另外新建一个名为`server-entry.ts`的服务端专用入口文件负责组装完整的HTML页面字符串输出给浏览器加载解析。 ```typescript // main.ts (Client Entry Point) import { createApp } from 'vue' import App from './App.vue' const app = createApp(App) app.mount('#app') ``` ```typescript // server-entry.ts (Server Entry Point) import { renderToString } from '@vue/server-renderer' import { createApp } from './src/main' // Adjust path according to your setup. export async function render() { const app = await createApp() return await renderToString(app) } ``` #### 构建HTTP Server 最后一步是在项目的根目录下编写简单的Express应用程序以监听特定端口等待传入连接，当接收到GET请求时调用之前定义好的render函数获取预渲染后的标记再发送回去完成整个流程闭环。 ```javascript // index.js or any other preferred filename. import express from 'express'; import { fileURLToPath } from 'url'; import { dirname, join } from 'path'; import { readFileSync } from 'fs'; import { render } from './build/server-entry.js'; // Make sure this matches the output location of built files. const isProd = process.env.NODE_ENV === 'production'; const root = dirname(fileURLToPath(import.meta.url)); const app = express(); app.use('/dist', express.static( join(root, 'dist'), !isProd && { index: false } )); app.get('*', async(req, res) => { try{ let html; if(!isProd){ // In development mode we need hot-reload capabilities so use SSR directly without bundling first. html = await render(); }else{ // For production builds load pre-built HTML string instead. html = readFileSync(join(__dirname,'./index.html'), 'utf8'); } res.setHeader('Content-Type','text/html;charset=utf-8'); res.end(html); }catch(error){ console.error(`Error during rendering : ${error}`); res.status(500).end('Internal Server Error'); } }); if (!isProd) { require('./server'); // Start Vite dev server for HMR support etc... } else { app.listen(process.env.PORT || 3000, () => console.log('Production Express server running at http://localhost:3000/') ); } ``` 上述代码片段展示了如何利用Vite的强大特性快速建立一套现代化前端开发工作流的同时兼顾高效的生产部署方案。