Vue项目极速部署到Github Page，小小白也能轻松搞定！

前端

2023-04-03 08:12:56

在 GitHub Pages 上部署你的 Vue 项目：分步指南

什么是 GitHub Pages？

GitHub Pages 是一个由 GitHub 提供的免费静态网站托管平台，非常适合托管你的 Vue 项目。它提供了简单的部署流程、强大的版本控制功能和免费的自定义域选项。

部署 Vue 项目到 GitHub Pages

部署你的 Vue 项目到 GitHub Pages 涉及以下步骤：

1. 项目初始化

使用 Vue CLI 创建一个新的 Vue 项目或打开一个现有的项目。

2. 准备部署

在你的 package.json 文件中添加以下代码：

{
  "scripts": {
    "deploy": "vue-cli-service build --target gh-pages"
  }
}

这将创建用于部署项目的脚本。

3. 登录 GitHub

创建或登录你的 GitHub 帐户，并创建一个新的存储库，将其命名为与你的项目名称相同。

4. 部署项目

从你的项目目录中，运行以下命令：

npm run deploy

你的项目将构建为静态文件并部署到 GitHub Pages。

5. 访问项目

你的项目 URL 为 https://<你的用户名>.github.io/<你的项目名称>。在浏览器中输入此 URL 以查看已部署的项目。

自动化部署

为了在每次提交代码后自动部署你的项目，可以使用 GitHub Actions。

1. 创建一个 GitHub 工作流

在你的项目中，创建一个 .github/workflows 目录并添加一个名为 main.yml 的文件。

2. 添加工作流配置

将以下配置添加到 main.yml 文件中：

name: Deploy Vue Project

on:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v2

      - name: Install dependencies
        run: npm install

      - name: Build project
        run: npm run build --target gh-pages

      - name: Deploy to GitHub Pages
        uses: JamesIves/github-pages-deploy-action@4.1.5
        with:
          branch: gh-pages
          folder: dist