1. 引言

随着互联网的快速发展，个人网站已经成为展示个人才华、分享知识和建立个人品牌的重要平台。Vue.js 作为一种流行的前端框架，因其易用性和高性能而被广泛使用。本文将为您详细介绍如何使用 GitHub Pages 一键部署 Vue 项目，轻松搭建个人网站。

2. 准备工作

在开始之前，请确保您已满足以下条件：

  • 注册并登录 GitHub 账户。
  • 安装 Node.js 和 npm（Node.js 的包管理器）。
  • 有一个本地 Vue 项目。

3. 创建 GitHub 仓库

  1. 打开 GitHub 官网，登录您的账户。
  2. 点击右上角的“+”号，选择“New repository”。
  3. 在“Repository name”中输入仓库名称（例如：yourname.github.io），并勾选“Initialize this repository with a README”。
  4. 点击“Create repository”创建仓库。

4. 配置 Vue 项目

  1. 打开您的本地 Vue 项目，进入项目根目录。
  2. 运行以下命令安装 gh-pages 插件：
npm install --save-dev gh-pages
  1. 修改 package.json 文件，添加以下命令：
"scripts": {
  "build": "vue-cli-service build",
  "deploy": "gh-pages -d build"
}

5. 部署到 GitHub Pages

  1. 运行以下命令构建项目：
npm run build
  1. 打开终端，进入项目根目录。
  2. 运行以下命令部署到 GitHub Pages：
npm run deploy

此时，您可以看到终端输出一些信息，包括部署成功的提示。

6. 访问个人网站

  1. 打开浏览器，输入以下网址：
https://<用户名>.github.io
  1. 您将看到您的个人网站已经成功部署到 GitHub Pages。

7. 总结

通过以上步骤，您已经成功将 Vue 项目一键部署到 GitHub Pages，搭建了个人网站。希望本文对您有所帮助，祝您搭建个人网站愉快！