如何使用Gitee Pages服务 搭建Vue项目

下面是详细讲解如何使用Gitee Pages服务搭建Vue项目的完整攻略：

步骤一：打包Vue项目

首先需要使用Vue CLI工具将项目进行打包，生成静态文件。命令如下：

npm run build

执行成功后，项目的打包文件将出现在dist文件夹中。

步骤二：创建Gitee仓库

接下来需要在Gitee上创建一个空仓库，用于存放打包好的Vue项目的静态文件。

步骤三：上传静态文件

将打包后的Vue项目的静态文件上传到Gitee仓库中。可以使用Gitee的网页界面或者Git命令行进行上传。

推荐使用命令行，这里展示一个示例操作：

# 克隆Gitee仓库
git clone https://gitee.com/your_username/your_repo.git

# 进入项目根目录
cd your_repo

# 将打包后的静态文件拷贝到仓库根目录下
cp -r /path/to/your/dist/* .

# 添加、提交、推送代码
git add .
git commit -m "upload dist files"
git push origin master

步骤四：开启Gitee Pages服务

在Gitee仓库的设置中，找到“Pages”选项，开启Gitee Pages服务，并设置访问路径为根目录。

这里有一个示例操作：

1. 进入Gitee仓库界面，点击右上角的“设置”，进入设置界面。
2. 找到“Pages”选项，点击“开启服务”。
3. 在弹出的“Pages服务配置”框中，将“访问路径”设置为根目录，即“/”。
4. 点击“保存”按钮。

示例一：使用自定义域名

如果需要使用自定义域名访问Gitee Pages服务，可以按照以下步骤操作：

1. 在域名管理后台添加一条CNAME记录，将域名CNAME值指向Gitee Pages服务的访问域名。例如，如果Gitee Pages服务访问域名为your_username.gitee.io/your_repo，则需要添加以下CNAME记录：

text
www.yourdomain.com CNAME your_username.gitee.io.

1. 在Gitee仓库的“Pages”设置中，将“自定义域名”字段设置为上面添加的域名（例如www.yourdomain.com），并保存。

完成上面两个步骤后，就可以使用自定义域名访问Gitee Pages服务了。

示例二：使用默认域名

如果不需要使用自定义域名，可以直接使用Gitee Pages服务的默认域名进行访问。

默认域名的格式为your_username.gitee.io/your_repo，具体的访问路径可以在Gitee仓库的“Pages”设置中找到。

现在就可以使用Gitee Pages服务访问Vue项目了，访问路径为：

• 如果使用自定义域名，即添加了CNAME记录，则为添加的域名，例如www.yourdomain.com。
• 如果使用默认域名，则为your_username.gitee.io/your_repo。