vue应用，从创建到部署到github pages

Danica 2/6/2022 Vuegithub-pages部署

参考资料

# 用vue官方提供的脚手架vue-cli来完成项目创建

用npm或者yarn全局安装vue-cli npm i -g @vue-cli

创建项目

//基于命令行
vue creage ProjectName
//或基于可视化面板
vue ui

1
2
3
4

可以通过修改项目根目录中的配置文件vue.config.js来让项目实现自动刷新

    module.exports = {
        devServer: {
        //修改端口
        port: 8080,
        //自动打开
        open: true
        }
    }

1
2
3
4
5
6
7
8

4.打开package.json文件查看可用命令 { "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build" } } 现在可以输入npm run serve命令，启动项目。

# 开发阶段（略过）

# 部署准备阶段

首先要明白[./dist]文件夹的由来

3.1 在github创建新仓库
3.2 按实际情况选初始化仓库，我通常用的都是第二个，push本地已有数据到仓库
3.3 创建好以后，到settings/tokens，生成新token
3.4 勾选repo，授予对仓库的完全访问权限 (opens new window)
3.4 创建完毕后复制密匙，回到仓库的settings/secrets/action界面，添加密匙
3.5 点击菜单的pages，新建gh-pages拿来放./dist

配置github action

4.1 点action，创建工作流程 (opens new window)，对照工作流程的存放位置，在本地创建.yml文件

复制以下代码，修改最后一项GITHUB_TOKEN名称

# workflow 的名称，如果省略则默认为当前 workflow 的文件名
name: deployment

on:
# 每当 push 到 main 分支时触发部署
push:
    branches: 
    - main

jobs:
docs:
    runs-on: ubuntu-latest # 使用最新的 Ubuntu 系统作为编译部署的环境

    steps:
    - name: Checkout codes
    uses: actions/checkout@v2.3.4

    # 设置 node.js 运行环境
    - name: Setup node
    uses: actions/setup-node@v2.1.2
    with:
        node-version: '14'

    # 设置缓存依赖，加快下次安装依赖的速度
    - name: Cache node modules
    uses: actions/cache@v2.1.3
    with:
        path: '**/node_modules'
        key: ${{ runner.os }}-node-${{ hashFiles('**/yarn.lock') }}

    # 安装依赖
    - name: Install dependencies
    run: yarn install

    # 构建文件
    - name: Generate files
    run: yarn build

    # 将构建后的文件推送到 gh-pages
    - name: Push to gh-pages     
    uses: crazy-max/ghaction-github-pages@v2
    with:
        # 部署到 gh-pages 分支
        target_branch: gh-pages
        # 部署目录
        build_dir: ./dist
    env:
        #填写刚才的token名
        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

# 用git push进行部署

可以在action里查看日志，部署地址既可以在deploy下找到
![查看日志](/img/deploy.jpg)

也可以在仓库首页的右侧的`Environments`找到。
![部署地址](/img/gh-page-path.jpg)

DANICA STATION

Choose mode

vue应用，从创建到部署到github pages

vue应用，从创建到部署到github pages

# 用vue官方提供的脚手架vue-cli来完成项目创建

# 开发阶段（略过）

# 部署准备阶段

# 用git push进行部署