Gitee Pages与Vue项目实战：从零搭建到自动化部署

1. 为什么选择Gitee Pages来部署你的Vue项目？

如果你是一名前端开发者，手头有几个Vue项目想展示给朋友、客户或者作为自己的作品集，那么你肯定绕不开“部署”这个环节。以前我们可能会租个服务器，折腾Nginx配置，费时费力还费钱。但现在，情况完全不同了。像Gitee Pages这样的静态站点托管服务，简直就是为我们这些前端开发者量身定做的“神器”。

我自己在项目初期也踩过不少坑，试过各种托管方式，最后发现Gitee Pages对于国内开发者来说，真的是又快又稳。首先，它完全免费，你不需要为流量和基础存储付费。其次，访问速度非常理想，因为服务器在国内，无论是你自己访问还是分享给其他人，加载速度都很有保障。最关键的是，它和Git仓库深度集成，你只需要把代码推上去，点几下鼠标就能完成部署，后续更新也是提交代码就自动搞定，这种体验对于追求效率的开发者来说太友好了。

简单来说，Gitee Pages就是一个免费的、高速的、与Git工作流无缝衔接的静态网页托管服务。你只需要一个Gitee账号和一个Vue项目，就能获得一个形如 你的用户名.gitee.io/你的仓库名 的专属访问地址。无论是个人博客、项目演示、产品官网还是技术文档，它都能轻松胜任。接下来，我就手把手带你从零开始，完成Vue项目在Gitee Pages上的搭建和自动化部署。

2. 前期准备：创建Vue项目与Gitee仓库

万事开头难，但只要把环境准备好，后面就是一马平川。这里我假设你已经有了Node.js和npm（或yarn）的基础环境。如果还没有，去Node.js官网下载安装LTS版本就行，安装过程一路下一步，非常简单。

2.1 快速初始化一个Vue项目

现在创建Vue项目，我强烈推荐使用Vue官方出品的 create-vue 工具，它基于Vite，速度比老旧的Vue CLI快得多，体验也更现代化。打开你的终端（Windows用CMD或PowerShell，Mac用Terminal），执行以下命令：

npm create vue@latest my-gitee-app

执行后，它会问你一堆问题，比如是否引入TypeScript、JSX支持、Vue Router、Pinia状态管理、测试工具等等。对于部署到Gitee Pages，这里有个关键点：如果你打算做单页面应用（SPA），一定要选择“Yes”来添加 Vue Router。 因为Gitee Pages本质上托管的是静态文件，对于前端路由需要特殊配置，我们后面会详细讲。其他选项根据你的项目需要来，初学者可以全部先选“No”，保持项目简洁。

项目创建完成后，进入目录并安装依赖：

cd my-gitee-app
npm install

现在，你可以运行 npm run dev 启动开发服务器，在浏览器打开 http://localhost:5173 就能看到默认的Vue页面了。到此，你的Vue项目就准备好了。

2.2 在Gitee上创建你的代码仓库

接下来，我们需要一个地方来存放代码。打开Gitee官网并登录，点击右上角的“+”号，选择“新建仓库”。仓库名称我建议就用你的项目名，比如 my-gitee-app。记得把“仓库公开”勾选上，因为Gitee Pages服务只对公开仓库免费开放。描述可以简单写一下，比如“我的第一个Gitee Pages Vue项目”。下面的“初始化仓库”部分，暂时什么都不要勾选，我们不要README、.gitignore和许可证，因为本地项目已经生成了这些文件，直接推送上去可能会冲突。

点击创建后，你会看到一个空仓库的指引页面。我们需要把本地的项目与这个远程仓库关联起来。回到你的终端，在项目根目录下，依次执行以下Git命令（请将下面的URL替换成你Gitee仓库的HTTPS地址）：

# 初始化本地Git仓库（如果项目创建时没自动初始化的话）
git init

# 将当前所有文件添加到暂存区
git add .

# 提交你的第一次更改
git commit -m "initial commit"

# 添加远程仓库地址，别名为 origin
git remo