如何将Vue3项目部署到Github Page

2023-03-28 02:06:50

前端开发者的福音：使用 Github Page 免费搭建你的个人网站

简介

身为前端开发人员，你是否渴望拥有一个专属平台来展示你的作品和分享你的观点？搭建一个网站可能是件令人望而生畏的任务，尤其涉及到服务器和托管费用时。不过，Github Page 为你提供了一个绝佳的解决方案，它是一个免费的网站托管服务，让你可以在 Github 上轻松创建和部署你的网站。

部署 Vue3 项目到 Github Page

第 1 步：创建 Github 仓库

首先，创建一个 Github 仓库来存放你的 Vue3 项目。登录 Github 网站，点击右上角的 “+” 图标并选择 “New repository”。输入仓库名称和，然后点击 “Create repository”。

第 2 步：添加 Vue3 项目

将你的 Vue3 项目添加到新创建的仓库中。你可以通过以下两种方式之一进行：

将项目文件直接拖放到 Github 仓库中。
使用 Git 命令将项目文件添加到仓库中。

第 3 步：安装 Github Pages

在仓库中，点击 “Settings” 选项卡，然后在左侧菜单中找到 “Pages”。在 “Source” 下拉列表中，选择 “master branch”。点击 “Save” 按钮。

第 4 步：部署你的项目

现在，你的 Vue3 项目已经部署到 Github Page 上了。你可以通过以下方式访问你的网站：

在浏览器中输入你的 Github 仓库地址，后面加上 “.github.io”。
点击 Github 仓库中的 “Pages” 选项卡，然后点击 “View Deployment” 按钮。

示例代码

以下是一个 Vue3 项目部署到 Github Page 的示例代码：

# package.json

{
  "name": "vue3-github-page",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "dev": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "deploy": "gh-pages -d dist"
  },
  "dependencies": {
    "vue": "^3.0.0"
  }
}

# index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  
</head>
<body>
  <div id="app"></div>
  <script src="js/app.js"></script>
</body>
</html>

# app.js

const app = Vue.createApp({
  data() {
    return {
      message: 'Hello, GitHub Page!'
    }
  },
  template: `
    <h1>{{ message }}</h1>
  `
})

app.mount('#app')

注意事项