vue项目提交到github

本文详细介绍了如何通过Git将Vue项目部署到远程仓库的过程。包括初始化本地仓库、添加及提交文件、关联远程仓库以及最终推送代码的具体步骤。
前提: 配置git、以及git的ssh key信息

假设已经都安装好了,此处我用vue项目为例,因为vue-cli已经默认为我生成了ignore文件

  1. 在项目目录
    初始化本地仓库,会创建一个.git目录
    git init
  2. 将项目所有文件(未被ignore)添加到仓库
    git add .
  3. 将add文件提交到本地仓库
    git commit -m ‘提交信息’
  4. 本地仓库关联远程git仓库
    git remote add origin git仓库
  5. 本地仓库代码提交到服务器
    git push -u origin master
最后刷新远程仓库页面就可以看到了,不要忘记写readme.md
### 如何将 Vue3 项目部署到 GitHub Pages 或 Repository 为了成功将 Vue3 项目部署到 GitHub,以下是详细的说明: #### 设置 `publicPath` 参数 在 Vue CLI 中,`publicPath` 是用于指定静态资源的基础路径的关键参数。如果计划将项目托管在 GitHub Pages 上,则需要设置该参数以匹配仓库结构。例如,假设您的仓库名为 `vue-admin-web`,则可以在 `vue.config.js` 文件中定义如下内容[^1]: ```javascript // vue.config.js module.exports = { publicPath: process.env.NODE_ENV === 'production' ? '/vue-admin-web/' : '/' }; ``` 上述代码表示,在生产环境中(即发布到 GitHub Pages),基础路径会被设为 `/vue-admin-web/`;而在开发环境,默认为基础路径根目录。 --- #### 创建 `.github/workflows/deploy.yml` 文件 为了让 GitHub 自动化处理项目的构建与部署流程,您需要创建一个 YAML 文件来描述工作流逻辑。以下是一个完整的示例配置文件[^2]: ```yaml name: CI on: push: branches: - main # 只有推送到 main 分支时才触发此任务 jobs: build-and-deploy: concurrency: ci-${{ github.ref }} runs-on: ubuntu-latest steps: - name: Checkout 🚀 uses: actions/checkout@v3 - name: Install and Build 🔧 run: | npm install npm run build - name: Deploy 🌐 uses: JamesIves/github-pages-deploy-action@v4.3.3 with: branch: gh-pages # 部署完成后提交的目标分支 folder: dist # 打包后的文件夹名 ``` 在此配置下,GitHub Actions 将执行以下操作: 1. **Checkout**: 拉取最新代码至虚拟机。 2. **Install & Build**: 安装依赖并运行构建命令 (`npm run build`)。 3. **Deploy**: 使用插件将打包完成的内容上传到 `gh-pages` 分支。 注意:确保目标分支名称(此处为 `gh-pages`)与实际需求一致,并且已启用 GitHub Pages 功能。 --- #### 启用 GitHub Pages 登录到 GitHub 并导航至您的仓库页面,进入 **Settings -> Pages** 菜单。确认源分支被设定为 `gh-pages`,随后保存更改即可访问站点链接[^3]。 --- #### 总结注意事项 - 如果未正确设置 `publicPath`,可能会导致路由失效等问题,请务必按照实际情况调整其值。 - 确保本地测试无误后再推送代码至远程仓库,以便减少潜在错误的发生概率。 - 对于首次使用者来说,建议先熟悉基本概念再逐步实践复杂功能。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值