Vite SSG 项目教程

Vite SSG 项目教程

【免费下载链接】vite-ssg Static site generation for Vue 3 on Vite 项目地址: https://gitcode.com/gh_mirrors/vit/vite-ssg

1. 项目目录结构及介绍

Vite SSG 项目的目录结构如下：

vite-ssg/
├── bin/
├── examples/
├── scripts/
├── src/
├── test/
├── .gitignore
├── .npmrc
├── CONTRIBUTING.md
├── LICENSE
├── README.md
├── build.config.ts
├── eslint.config.js
├── package.json
├── pnpm-lock.yaml
├── pnpm-workspace.yaml
├── tsconfig.json

目录结构介绍

• bin/: 存放项目的可执行文件。
• examples/: 存放项目的示例代码。
• scripts/: 存放项目的脚本文件，如构建脚本、测试脚本等。
• src/: 存放项目的主要源代码，包括 Vue 组件、路由配置等。
• test/: 存放项目的测试代码。
• .gitignore: Git 忽略文件配置。
• .npmrc: npm 配置文件。
• CONTRIBUTING.md: 贡献指南。
• LICENSE: 项目许可证。
• README.md: 项目说明文档。
• build.config.ts: 构建配置文件。
• eslint.config.js: ESLint 配置文件。
• package.json: 项目依赖和脚本配置。
• pnpm-lock.yaml: pnpm 锁定文件。
• pnpm-workspace.yaml: pnpm 工作区配置文件。
• tsconfig.json: TypeScript 配置文件。

2. 项目启动文件介绍

项目的启动文件通常位于 src/main.ts 或 src/main.js。以下是一个典型的启动文件示例：

// src/main.ts
import { ViteSSG } from 'vite-ssg'
import App from './App.vue'
import routes from 'virtual:generated-pages'

export const createApp = ViteSSG(
  App,
  { routes },
  ({ app, router, initialState }) => {
    // 安装插件等
  }
)

启动文件介绍

• ViteSSG: 这是 Vite SSG 的核心函数，用于创建 Vue 3 应用并进行静态站点生成。
• App: 根组件，通常是一个 Vue 组件。
• routes: 路由配置，通常由 virtual:generated-pages 生成。
• createApp: 导出一个函数，用于创建应用实例。

3. 项目的配置文件介绍

vite.config.ts

Vite 的配置文件通常位于项目根目录下，名为 vite.config.ts 或 vite.config.js。以下是一个典型的 Vite 配置文件示例：

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

export default defineConfig({
  plugins: [vue()],
  ssgOptions: {
    crittersOptions: {
      preload: 'media'
    }
  }
})

配置文件介绍

• plugins: 配置 Vite 插件，如 @vitejs/plugin-vue 用于支持 Vue 3。
• ssgOptions: 配置 Vite SSG 的选项，如 crittersOptions 用于配置 Critical CSS 生成。

通过以上配置，Vite SSG 可以生成静态站点，并支持 Vue 3 应用的开发和构建。

【免费下载链接】vite-ssg Static site generation for Vue 3 on Vite 项目地址: https://gitcode.com/gh_mirrors/vit/vite-ssg