vue3 project deployment to Github

This tutorial is adapted to vue projects built with webpack, vue-cli, vite and other scaffolding. Of course, both vue2 and vue3 are droppable.

1. Prerequisite: your codebase has been committed to Github

If you don't have one, go to GitHub and create a new repository and commit your local project to the newly created repository on GitHub.
For details on how to do this, see my blogGit Usage Notes - Continuous Updates - Associating Local Projects to Remote Repositories

2. Setting up the deployment configuration on GitHub

3. Go to the root directory of your project and create a workflow file.

Create a new.github folder, then create a newworkflows folder, create a new 。

The contents are as follows:

# Deploy static content to the GitHub Pages Simple workflow for
name: Deploy static content to Pages

on:
  # Run only when pushing to the default branch。
  push:
    branches: ['main']

  # This option allows you to manually add a file to the Action tab Page-triggered workflows
  workflow_dispatch:

# set up GITHUB_TOKEN approvals，to allow deployment to GitHub Pages。
permissions:
  contents: read
  pages: write
  id-token: write

# Allow a concurrent deployment
concurrency:
  group: 'pages'
  cancel-in-progress: true

jobs:
  # Job description for a single deployment
  deploy:
    environment:
      name: github-pages
      url: ${{ .page_url }}
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v3
      - name: Set up Node
        uses: actions/setup-node@v3
        with:
          node-version: 20
          cache: 'npm'
      - name: Install dependencies
        run: npm install
      - name: Build
        run: npm run build
      - name: Setup Pages
        uses: actions/configure-pages@v3
      - name: Upload artifact
        uses: actions/upload-pages-artifact@v1
        with:
          # Upload dist repository
          path: './dist'
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v1

which we need to modify:

1. node version, set according to the actual version used in your project
2. Packaging directories, generallydistIf not, please change
3. Project script, this project is built using npm, if you are using pnpm, or ymal etc, you need to modify it manually. The settings for pnpm are given below:

steps:
  - name: Checkout
	uses: actions/checkout@v4
  - name: Set up pnpm
	uses: pnpm/action-setup@v4
	with:
	  version: 9
  - name: Set up Node
	uses: actions/setup-node@v3
	with:
	  node-version: 20
	  cache: 'pnpm'
  - name: Install dependencies
	run: pnpm install
  - name: Build
	run: pnpm run build

The version of pnpm also depends on what you actually use, and everything after that is the same. Please look up the rest on your own.

4. Modify your project deployment root directory

Normal conditions are usually in the maybe maybe miles, depending on which scaffolding you use.
in order to As an example, the presence ofbase in the field. Reference Codevite-vue3-charts

If you have a wrapper, as above, it may be a variable, usually in the root directory of the. file, just change the value of this variable. This is shown in the following figure:

5. Submit the code and your project will be automatically deployed.

Or go to the GitHub web repository directory, and add a new file in theActions In the tab, manual deployment

6. Access routes

Access path: [github account name]. /[repository name].
Example:/vite-vue3-charts

Example Project Code Referenceweiz-vue3-charts