项目部署到Github-Page

最新推荐文章于 2025-03-25 09:27:11 发布

Tangctt

最新推荐文章于 2025-03-25 09:27:11 发布

阅读量595

点赞数

分类专栏：学习笔记 Git 文章标签： github git

本文链接：https://blog.youkuaiyun.com/Tang__CT/article/details/124750333

版权

学习笔记同时被 2 个专栏收录

33 篇文章

订阅专栏

Git

5 篇文章

订阅专栏

本文介绍了在将Vue项目部署到Github Pages时遇到的问题及解决方法，包括查阅Vue Cli官方文档，设置正确的baseURL，以及如何创建和部署仓库。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目部署到`Github-Page`

问题描述

在将项目部署到Github-Page时浏览不到项目页面

解决方法

查看Vue Cli官方文档中的GitHub Pages部署

在vue.config.js中设置正确的publicPath
- 如果打算将项目部署到 https://<USERNAME>.github.io/ 上，publicPath 将默认被设为 “/”，你可以忽略这个参数
- 如果打算将项目部署到 https://<USERNAME>.github.io/<REPO>/ 上 (即仓库地址为 https://github.com/<USERNAME>/<REPO>)，可将 publicPath 设为 “//”。
- 举个例子，如果仓库名字为“my-project”，那么 vue.config.js 的内容应如下所示：

module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
    ? '/my-project/'
    : '/'
}

在项目目录下，创建如下的deploy.sh(可以适当地取消注释)并运行它进行部署

#!/usr/bin/env sh

# 当发生错误时中止脚本
set -e

# 构建
npm run build

# cd 到构建输出的目录下
cd dist

# 部署到自定义域域名
# echo 'www.example.com' > CNAME

git init
git add -A
git commit -m 'deploy'

# 部署到 https://<USERNAME>.github.io
# git push -f git@github.com:<USERNAME>/<USERNAME>.github.io.git master

# 部署到 https://<USERNAME>.github.io/<REPO>
# git push -f git@github.com:<USERNAME>/<REPO>.git master:gh-pages

cd -

或者通过以下方式进行创建Github仓库与部署工作

#1. 先到`Github`创建仓库，复制仓库的`ssh`连接（推荐）
（也可以在本地`git init`后再`git remote add origin` + 仓库地址）

# 2. 再`build`后的项目`dist`下

git clone + ssh
(会自动创建与仓库名相同的文件夹)

# 3. 将所有文件移动到新的文件夹中（名称为仓库名）

# 4. `git add .`将所有文件标记提交

# 5. `git commit -m "提交信息"`

# 6. `git push -u origin master`
（在第一次git push加了-u后，再次git pull或者push就不需要加两个主机名了）