Vite SSG 项目教程
vite-ssgStatic site generation for Vue 3 on Vite项目地址:https://gitcode.com/gh_mirrors/vi/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。
vite-ssgStatic site generation for Vue 3 on Vite项目地址:https://gitcode.com/gh_mirrors/vi/vite-ssg