从入门到上线：7步掌握Vite SSG静态网站生成实战指南

Vite SSG是一款基于Vue 3和Vite的超高效静态网站生成工具，能帮助开发者快速构建高性能静态网站。本文将通过场景化教学，带你零基础上手Vite SSG，从环境搭建到部署上线，全程实战演示，让你轻松掌握静态网站开发的核心技能。

🌟 为什么选择Vite SSG？静态网站开发的核心优势

在现代前端开发中，静态网站因加载速度快、SEO友好、部署成本低等特性备受青睐。Vite SSG作为新一代静态网站生成工具，凭借以下核心优势脱颖而出：

• 极速开发体验：基于Vite的快热更新能力，修改代码实时反馈，开发效率提升300%
• Vue 3完美支持：原生支持Vue 3的Composition API和单文件组件
• 灵活的页面系统：通过文件系统自动生成路由，支持.vue和.md文件混合开发
• 零配置优化：内置代码分割、懒加载和预渲染，无需额外配置即可获得高性能
• 丰富的插件生态：无缝集成Vue生态系统，轻松扩展功能

图：Vite SSG静态网站开发流程示意，从代码编写到最终生成静态页面

🛠️ 环境准备：3分钟完成开发环境配置

开始使用Vite SSG前，确保你的开发环境满足以下要求：

• Node.js 14.0.0及以上版本
• npm、yarn或pnpm包管理工具（推荐pnpm以获得更快的安装速度）

核心步骤：

1. 克隆项目仓库

git clone https://gitcode.com/gh_mirrors/vi/vite-ssg

2. 进入项目目录

cd vite-ssg

3. 安装依赖

pnpm install

完成以上步骤后，你的Vite SSG开发环境就配置完成了。项目提供了多个示例，其中examples/multiple-pages/是最适合新手入门的多页面应用模板。

🚀 实战开发：5步构建你的第一个静态网站

1. 项目结构解析

Vite SSG采用约定优于配置的设计理念，核心目录结构如下：

• src/pages/：存放页面文件，支持.vue和.md格式
• src/components/：可复用的Vue组件
• vite.config.ts：项目配置文件

2. 配置项目

打开项目根目录下的vite.config.ts文件，这是Vite SSG的核心配置文件。基础配置示例：

export default {
  plugins: [
    Vue({ include: [/\.vue$/, /\.md$/] }),
    Pages({ extensions: ['vue', 'md'] }),
    Markdown({ headEnabled: true }),
  ],
  ssgOptions: {
    script: 'async',
    formatting: 'prettify',
  },
}

3. 创建内容页面

在src/pages/目录下创建文件即可自动生成路由：

• 创建index.md作为网站首页
• 创建about.vue作为关于页面
• 支持嵌套目录，如nested/deep/b.md会生成/nested/deep/b路由

4. 启动开发服务器

pnpm dev

访问http://localhost:3000即可预览网站，所有修改都会实时更新，无需手动刷新。

5. 构建静态文件

开发完成后，执行以下命令生成可部署的静态文件：

pnpm build

构建结果会输出到dist目录，包含所有HTML、CSS和JavaScript文件。

📦 部署上线：3种简单高效的部署方案

Vite SSG生成的静态文件可以部署到任何支持静态文件托管的平台：

1. 本地预览

构建完成后，可通过以下命令在本地预览最终效果：

pnpm serve

2. 静态托管平台

将dist目录下的文件上传到Netlify、Vercel或GitHub Pages等平台，只需几步即可完成部署。

3. 传统服务器

通过FTP或SCP将dist目录上传到Nginx、Apache等Web服务器的网站根目录。

❓ 常见问题与解决方案

Q: 如何添加全局组件？

A: 在src/components/目录下创建的组件会被自动注册，可直接在页面中使用。

Q: 如何处理图片等静态资源？

A: 将资源放在src/assets/目录下，在Markdown或Vue组件中通过相对路径引用。

Q: 如何自定义路由？

A: 修改vite.config.ts中的Pages插件配置，可自定义路由生成规则。

通过本文的实战指南，你已经掌握了Vite SSG静态网站开发的核心流程。无论是个人博客、产品展示还是文档网站，Vite SSG都能帮助你快速构建高性能的静态网站。立即动手尝试，开启你的静态网站开发之旅吧！