Vite SSG 项目教程

1. 项目的目录结构及介绍

Vite SSG 项目的目录结构通常包括以下几个主要部分：

vite-ssg/
├── src/
│   ├── assets/
│   ├── components/
│   ├── layouts/
│   ├── pages/
│   ├── router/
│   ├── store/
│   ├── main.ts
│   └── App.vue
├── public/
├── vite.config.ts
├── package.json
└── README.md

• src/: 包含项目的源代码，包括组件、布局、页面、路由和状态管理等。
  • assets/: 存放静态资源，如图片、字体等。
  • components/: 存放 Vue 组件。
  • layouts/: 存放布局组件。
  • pages/: 存放页面组件。
  • router/: 存放路由配置。
  • store/: 存放状态管理文件，如 Vuex 或 Pinia。
  • main.ts: 项目的入口文件。
  • App.vue: 项目的根组件。
• public/: 存放公开的静态文件，如 index.html。
• vite.config.ts: Vite 的配置文件。
• package.json: 项目的依赖和脚本配置。
• README.md: 项目的说明文档。

2. 项目的启动文件介绍

项目的启动文件是 src/main.ts，它是整个应用的入口点。以下是 main.ts 的基本结构：

import { ViteSSG } from 'vite-ssg'
import App from './App.vue'
import routes from './router'

export const createApp = ViteSSG(
  App,
  { routes },
  ({ app, router, routes, isClient, initialState }) => {
    // 安装插件等自定义设置
  }
)

• ViteSSG: 是 Vite SSG 的入口函数，用于创建应用实例。
• App: 项目的根组件。
• routes: 路由配置。
• createApp: 导出的函数，用于创建应用实例并进行自定义设置。

3. 项目的配置文件介绍

项目的配置文件是 vite.config.ts，它包含了 Vite 的配置选项。以下是 vite.config.ts 的基本结构：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  ssgOptions: {
    script: 'async',
    includedRoutes(paths, routes) {
      // 自定义路由渲染逻辑
      return paths.filter(i => !i.includes('foo'))
    }
  }
})

• defineConfig: 用于定义 Vite 配置的函数。
• plugins: 配置 Vite 插件，如 @vitejs/plugin-vue。
• ssgOptions: 配置 Vite SSG 的选项，如脚本类型和自定义路由渲染逻辑。

以上是 Vite SSG 项目的基本教程，涵盖了项目的目录结构、启动文件和配置文件的介绍。希望这些内容能帮助你更好地理解和使用 Vite SSG。