文件结构

熟悉 vite-plugin-ssr 之前，我们推荐阅读 React 教程 或 Vue 教程，或者使用模板示例（$ npm init vite-plugin-ssr@latest）

对于高阶应用，我们建议使用多个 pages/ 目录的域名驱动文件结构

对于基础应用，我们建议使用单个 pages/ 目录

基础应用

# Landing page (URL: `/`)
/pages/index/index.page.js
/pages/index/SomeComponentForLandingPage.js
/pages/index/**/* # 有关 landing page 的文件
# About page (URL: `/about`)
/pages/about/index.page.js
/pages/about/SomeComponentForAboutPage.js
/pages/about/**/* # 有关 about page 的文件
# Other pages (建议为每个页面创建一个目录，如
# `/pages/about/index.page.js` 代替 `/pages/about.page.js`)
/pages/*/*.page.js

# 页面共享的 Components
/components/*

# 控制页面如何渲染的代码
/renderer/_default.page.server.js
/renderer/_default.page.client.js
/renderer/_error.page.js
/renderer/PageShell.js  # 根 (React/Vue/...) 组件
/renderer/PageShell.css # 由 `/pages/**/*.page.js` 导出
/renderer/Header.js # 网站header
/renderer/Footer.js # 网站footer
/renderer/logo.svg # 网站logo

# Express.js/Fastify/... 代码
/server/*

Examples:

域名驱动

# Marketing pages
/marketing/pages/index/index.page.js # Landing page (URL: `/`)
/marketing/pages/about/index.page.js # About page (URL: `/about`)
/marketing/pages/jobs/index.page.js # Jobs page (URL: `/jobs`)
/marketing/_default.page.route.js # 路由指向 `/*` 而非 `/marketing/*`，见下文

# Auth related code & pages
/auth/pages/signup/index.page.js
/auth/pages/login/index.page.js
/auth/components/UserInfo.js
/auth/db/fetchUser.js

# All code related to products
/products/pages/index/index.page.js
/products/pages/product/index.page.js
/products/pages/product/index.page.route.js
/products/db/fetchProduct.js
/products/db/fetchProductList.js

# 跟上面的 “基础应用” 相同
/renderer/*
/server/*
// /marketing/_default.page.route.js

// 我们将 marketing 页面路由到 `/*` 而非 `/marketing/*`
export const filesystemRoutingRoot = "/";
// /product/pages/product/index.page.route.js

// 我们可以使用路由字符串（或路由函数）来定义参数化路由来覆盖文件系统路由
export default "/product/@productId";

结果路由表：

PROJECT FILES                                    URL
/marketing/pages/index/index.page.js             /
/marketing/pages/about/index.page.js             /about
/marketing/pages/jobs/index.page.js              /jobs

/auth/pages/signup/index.page.js                 /auth/signup
/auth/pages/login/index.page.js                  /auth/login

/products/pages/index/index.page.js              /products
/products/pages/product/index.page.js            /product/@productId

与基础应用相同，我们建议为每个页面创建一个目录，例如 /products/pages/index/index.page.js 而非 /products/pages/index.page.js

Example：

也可参考：

src/pages/

我们可以将 pages/ 嵌入到 src/ 中：

/src/pages/index/index.page.js # => URL: `/`
/src/pages/about/index.page.js # => URL: `/about`

参考：