github自动部署(保姆级教程)

步骤一:

新建一个github仓库(注意!!! 新建的仓库只需要填写:

就行，其他的不用勾选)

步骤二:

先打开vscode终端cd进入到自己的项目

git remote -v //查看一下自己的项目有没有连接过远端仓库

//如果有

git remote remove origin //移除现有的 "origin" 远程仓库配置再进行下一步

//没有的话直接操作下面的

进入到刚刚创建的仓库，找到

复制到vscode ，打开终端(或者cmd)，cd进入你的Vue项目，粘贴上去，与远端仓库建立连接，然后使用

git push -u origin master /*推送代码到远程仓库*/

步骤三:

回到刚才创建的新仓库刷新一下，就可看见你上传的项目了，

然后打开:

进入后:

将以下代码复制放入里面:

name: Vue Deploy

on:
  push:
    branches:
      - master

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout repository
        uses: actions/checkout@v2

      - name: Set up Node.js
        uses: actions/setup-node@v2
        with:
          node-version: '14'

      - name: Install dependencies
        run: npm install

      - name: Build
        run: npm run build

      - name: Deploy to GitHub Pages
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.PAT }}  # 此处修改为你的Secret名称
          publish_dir: ./dist

随后点击右上角:

打开弹窗，什么都不用改，直接点击提交修改:

点击右上角个人中心:

打开设置，往下滑，左侧最下面找到

打开，左侧找到:

点击进入：右上角点击

打开后

勾选这个选项，选择刚刚创建的仓库

打开后里面的选项，全部勾选成最后一个(注意只勾选上面 Repository permissions里面的选项，其他不用动)，勾选完成后，拉到最下面，点击生成令牌(Generate token)

随后

然后返回你刚刚创建的仓库打开

下拉找到左侧

打开

进入

点击添加密钥(Add secret)

注意生成完令牌后:

打开vscode，找到你要上传的项目里面的vue.config.js

配置:

publicPath: '/*/创建的(上传的)仓库名称/*/'

然后在vscode终端上写入推送命令

git add .//添加文件

git commit -m '提交' //提交文件

git pull //拉取代码

git push //推送到仓库

推送完成后，再回到github仓库

等待github处理完毕(共两次)

处理完毕后打开

点击 Visit site即可查看到自己的项目了🎉🎉

重点注意:

点击 Visit site即可查看到自己的项目后，一定要检查一下

如果你的项目里面用到了接口，请检查接口是否会报错，如果报错，原因是你可能用了本地网址，所有网址均要改成企业网址或网络网址，不可使用本地网址