【亲测免费】 Vite-SSG 常见问题解决方案

项目基础介绍

Vite-SSG 是一个基于 Vite 和 Vue 3 的静态站点生成器，由 Anthony Fu 开发并维护。它允许开发者使用 Vue 3 和 Vite 快速构建静态网站，支持服务端渲染（SSR）和客户端渲染（CSR）。Vite-SSG 的主要编程语言是 TypeScript 和 JavaScript。

新手使用注意事项及解决方案

1. 路由配置问题

问题描述：在使用 Vite-SSG 时，如果直接使用 createRouter 创建路由，可能会导致 location is not defined 或其他路由相关的错误。

解决方案：

• 步骤 1：在 src/main.ts 中，使用 ViteSSG 函数来定义路由，而不是使用 createRouter。
• 步骤 2：确保路由配置文件中只定义了 routes，不要手动创建路由实例。

// src/main.ts
import { ViteSSG } from 'vite-ssg'
import App from './App.vue'
import routes from '@/router/index.ts'

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

2. Node.js 版本问题

问题描述：Vite-SSG 要求 Node.js 版本 >= 14，如果使用较低版本的 Node.js，可能会导致项目无法正常运行。

解决方案：

• 步骤 1：检查当前 Node.js 版本，可以使用命令 node -v。
• 步骤 2：如果版本低于 14，建议升级 Node.js 到最新稳定版本。可以使用 nvm（Node Version Manager）来管理多个 Node.js 版本。

# 使用 nvm 安装最新稳定版 Node.js
nvm install --lts
nvm use --lts

3. 依赖安装问题

问题描述：在安装 Vite-SSG 及其依赖时，可能会遇到依赖冲突或安装失败的问题。

解决方案：

• 步骤 1：确保项目根目录下有正确的 package.json 文件，并且已经安装了所有必要的依赖。
• 步骤 2：使用 npm install 或 yarn install 重新安装依赖。如果使用 pnpm，可以使用 pnpm install。

# 使用 npm 安装依赖
npm install

# 使用 yarn 安装依赖
yarn install

# 使用 pnpm 安装依赖
pnpm install

通过以上步骤，新手可以更好地理解和使用 Vite-SSG，避免常见问题的发生。