[教程]Vue项目轻松部署GitHub Pages，只需三步实现个人网站上线

在数字化时代，拥有一个个人网站或在线简历对于个人品牌建设和职业发展至关重要。使用Vue框架构建网站后，通过GitHub Pages可以轻松地将你的网站上线。以下是使用Vue项目部署到GitHub Pa...

在数字化时代，拥有一个个人网站或在线简历对于个人品牌建设和职业发展至关重要。使用Vue框架构建网站后，通过GitHub Pages可以轻松地将你的网站上线。以下是使用Vue项目部署到GitHub Pages的详细步骤：

第一步：创建Vue项目

1. 首先，确保你已经安装了Node.js和npm。如果没有，请从Node.js官网下载并安装。

2. 使用npm全局安装Vue CLI（如果尚未安装）：

   npm install -g @vue/cli

3. 创建一个新的Vue项目：

   vue create my-vue-project

4. 在项目创建过程中，选择你喜欢的预设或手动配置项目。

5. 进入项目目录：

   cd my-vue-project

第二步：配置GitHub Pages

1. 在GitHub上创建一个新的仓库，仓库名称格式为 你的用户名.github.io。

2. 将你的Vue项目克隆到本地：

   git clone https://github.com/你的用户名/你的用户名.github.io.git

3. 将你的Vue项目代码复制到克隆的仓库中：

   cp -r my-vue-project/* your-user-name.github.io

4. 在GitHub仓库中，将主分支设置为 gh-pages：

   • 在GitHub仓库设置中，找到Branches选项。
   • 选择gh-pages分支作为主分支。

5. 初始化仓库，提交并推送到远程仓库：

   git init
   git add .
   git commit -m "Initial commit"
   git remote add origin https://github.com/你的用户名/你的用户名.github.io.git
   git push -u origin gh-pages

第三步：自动化部署

为了实现自动化部署，你可以使用GitHub Actions。

1. 在你的Vue项目中，创建一个名为 .github/workflows/auto-deploy.yml 的新文件，并添加以下内容：

 name: Auto Deploy to GitHub Pages on: push: branches: - main jobs: build-and-deploy: runs-on: ubuntu-latest steps: - uses: actions/checkout@v2 - name: Use Node.js uses: actions/setup-node@v2 with: node-version: '14' - run: npm ci - run: npm run build - name: Deploy to GitHub Pages uses: JamesIvanovich/gh-pages-action@v3 with: branch: gh-pages

1. 推送代码到GitHub仓库的 main 分支，GitHub Actions将会自动执行部署流程。

现在，你可以通过访问 https://你的用户名.github.io 来查看你的Vue项目网站。

以上步骤将帮助你轻松地将Vue项目部署到GitHub Pages，让你的个人网站快速上线。