github actions 部署vue项目

1. 创建一个vue项目

　　　　我们这使用vue-cli直接生成一个项目，确保全局安装了vue-cli脚手架，安装命令为npm install -g @vue/cli，打开控制台，输入以下命令：vue create 项目名，创建一个新项目，选择        默认配置。

2. 修改package.json文件

　　　　在package.json文件中增加一条命令，"homepage": "https://[github用户名].github.io/[项目名]"

3.  项目根目录下新增vue.config.js文件

　　　　module.exports = { outputDir: 'dist', publicPath: process.env.NODE_ENV === 'production' ? '/[项目名]/' : '/' }，这需要注意一下，由于github pages默认的地址是包含子目录的，所 　　以我这这需要指定一下publicPath的路径为我们的项目名。

4.  上传代码

　　　　登入我们的Github账号，新建一个仓库，接着进行以下操作

　　　　git init ==》 git add .  ==》 git commit -m "first commit"  ==》 git remote add origin [仓地址]  ==》 git push -u origin master

5. 在github上申请private token并且配置

　　　　（1）首先点击我们的小头像，然后点击 Setting

　　　　　　

　　　　(2)  接着在左侧列表中选择 Developer setttings

　　　　　　

　　　　（3）然后在左侧列表中选择 Personal access tokens

　　　　　　

　　　　（4）最后我们点击 Generate new token按钮，选择好权限，生成一个新的token，记下生成的token，一会我们还需要用到。

　　　　（5）回到我们刚新建的仓库中，点击仓库的Settings

　　　　　　

　　　　（6）点击左侧的Secrets按钮

　　　　　　

　　　　（7）点击Add a new secret按钮，自己起个Secret名称（我这就叫ACCESS_TOKEN了）并填入刚申请的token值，点击Add secret按钮。

6.  编写yml文件

　　　　（1）点击Actions按钮

　　　　　　

　　　　（2）进入Actions页面，可以看到github给我们预设了很多模板，我们这里先不管这些，点击 Set up a workflow yourself。

　　　　　　

　　　　（3）现在让我们开始编写yml文件吧，输入以下内容，并给yml文件换个名字，我们就叫 buildAndDeploy.yml　

　　　　　　name: GitHub Actions Build and Deploy Demo

　　　　　　on:

　　　　　　　push:

　　　　　　　　branches:

　　　　　　　　　- master

　　　　　　jobs:

　　　　　　　build-and-deploy:

　　　　　　　　runs-on: ubuntu-latest # 我们选择使用最新的ubuntu系统

　　　　　　　　steps:

　　　　　　　　- name: Checkout

　　　　　　　　　uses: actions/checkout@master # 将代码拷贝到虚机中

　　　　　　　　　with:

　　　　　　　　　　persist-credentials: false

　　　　　　　　- name: Install and Build

　　　　　　　　　run: |

　　　　　　　　　　npm install

　　　　　　　　　　npm run-script build

　　　　　　　　- name: Deploy

　　　　　　　　　uses: JamesIves/github-pages-deploy-action@releases/v3

　　　　　　　　　with:

　　　　　　　　　　ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }} # 使用刚新建的secret

　　　　　　　　　　BRANCH: gh-pages # 存放产物的分支名称

　　　　　　　　　　FOLDER: dist # 存放build后产物的目录

　　　　　　　　　　BUILD_SCRIPT: npm install && npm run build # 执行的命令

 

　　　　（4）点击 Start commit按钮，接着点击 Commit new file按钮，回到主页面后，点击Actions按钮，我们可以看到action已经跑起来啦

 

7. 开启github pages

　　　　进入项目的Settings界面，往下滑动页面，找到GitHub Pages设置，Source选择我们在yml文件中指定的那个分支，设置完成后可以看到一行蓝色的提示：Your site is ready to be 　　published at xxxxxx，最后我们访问 https://[用户名].github.io/[项目名] 就可以看到自己的网站啦。

 

注意：目前github pages存放的只是静态资源，假如你切换到某个路由，再刷新页面时，会出现404页面，请注意！！！

 

项目GitHub地址：https://github.com/zhenfeng95/vue-actions-deploy/

效果地址：https://zhenfeng95.github.io/vue-actions-deploy/

 

参考连接：http://www.ruanyifeng.com/blog/2019/09/getting-started-with-github-actions.html

　　　　   https://blog.csdn.net/dikentoujing99/article/details/103681903