打造前沿博客网站：利用 GitHub Pages 和 Gitee Pages 轻松发布 Vue 项目

2023-11-04 14:05:42

引领前端潮流：使用 GitHub Pages 和 Gitee Pages 部署 Vue 项目

引言

对于前端开发者而言，拥有一个可以分享给世界各地的项目网站无疑是一件令人兴奋的事情。GitHub Pages 和 Gitee Pages 作为两大备受推崇的静态网站托管服务，为开发者提供了绝佳的平台来展示他们的 Vue 项目。本文将深入探讨使用 GitHub Pages 和 Gitee Pages 将 Vue 项目部署为静态网站的详细步骤，帮助您轻松实现项目发布。

准备工作

在开始部署之前，您需要确保已完成以下准备工作：

安装 Node.js 和 npm。
安装 Vue CLI。
创建 Vue 项目。

GitHub Pages 部署

创建 GitHub 仓库

首先，在 GitHub 上创建一个新的仓库。
初始化 Git

在您的项目目录中，运行以下命令初始化 Git：
```
git init
```
添加和提交代码

将您的项目代码添加到 Git 仓库：
```
git add .
```
然后提交代码：
```
git commit -m "Initial commit"
```
配置 GitHub Pages

在您的 GitHub 仓库设置中，找到“Pages”选项卡。选择“Source”下拉菜单，然后选择“master branch”。点击“Save”按钮保存更改。
构建和部署项目

在您的项目目录中，运行以下命令构建项目：
```
npm run build
```
然后将构建后的代码推送到 GitHub：
```
git push origin master
```
GitHub Pages 会自动将您的项目部署到 https://.github.io/。

Gitee Pages 部署

创建 Gitee 仓库

首先，在 Gitee 上创建一个新的仓库。
初始化 Git

在您的项目目录中，运行以下命令初始化 Git：
```
git init
```
添加和提交代码

将您的项目代码添加到 Git 仓库：
```
git add .
```
然后提交代码：
```
git commit -m "Initial commit"
```
配置 Gitee Pages

在您的 Gitee 仓库设置中，找到“Pages”选项卡。选择“Source”下拉菜单，然后选择“master branch”。点击“Save”按钮保存更改。
构建和部署项目

在您的项目目录中，运行以下命令构建项目：
```
npm run build
```
然后将构建后的代码推送到 Gitee：
```
git push origin master
```
Gitee Pages 会自动将您的项目部署到 https://.gitee.io/。