How to deploy vue project to gitee

As a popular JavaScript framework, Vue’s componentization, data-driven and single-file components and other features have received widespread attention and recognition. Gitee (code cloud) is an open source community that integrates code hosting, project management, collaborative development, deployment and online functions. This article will introduce how to deploy Vue projects to Gitee Pages.

1. Preparation

1.1 Create a Gitee account

First, you need to go to the Gitee homepage ([https://gitee.com/)](https://gitee .com/) to register and log in.

1.2 Create a Vue project

Next, you need to create a Vue project. Here we take Vue CLI as an example. If you use other ways to create the project, please skip this step.

vue create my-project

During the creation process, you can choose to use Vue’s default settings or configure it manually. If you want to learn how to manually configure a Vue project, please refer to the Vue official documentation.

1.3 Initialize the Git repository and push the code

After the Vue project is created, we need to put it into a Git repository and push it to the remote repository. We assume that you have installed Git and have some experience using Git.

cd my-project
git init
git add .
git commit -m "initial commit"
git remote add origin [your-gitee-repository]
git push -u origin master

2. Deploy Vue project to Gitee Pages

2.1 Create Gitee Pages repository

Gitee Pages is a static website hosting service that can deploy static files to Gitee Pages repository , making it accessible via a public access URL.

Select "New Warehouse", enter the warehouse name, and check "Initialize README.md file" and "Create Gitee Pages", and finally click "Create Warehouse".

2.2 Configure the Gitee Pages repository

After the creation is completed, you need to select "Settings" > "Gitee Pages", and then select "Source: gh-pages branch" in "Gitee Pages Pages" /docs directory".

2.3 Install the deployment tool

Gitee Pages officially provides a deployment tool-Gitee Pages automatic deployment client. We need to download and install it in order to deploy the project to Gitee Pages.

You can find the "Automatic deployment client function" on the Gitee Pages page, download and install the automated deployment client according to your operating system.

2.4 Configuring automated deployment

After you download and install the automatic deployment client, you need to create a deployment configuration file in the project root directory.

touch gitee-pages.yml

Next, you need to use a text editor to open the file and edit the following content:

pages:
  branch: master
  html_dir: dist
  cname: your.gitee.pages.domain.com
  sync:
    items:
     - dist

Among them, branch represents the branch used by Gitee Pages, and html_dir represents the directory you want to deploy. Name, cname represents your custom domain name, sync.items represents the deployed directory, here is dist.

2.5 Deploy Vue project

After completing the above work, you can try to use the automatic deployment client to deploy the Vue project to Gitee Pages.

gitee-pages push

After this, you can access your Vue project on the Gitee Pages configuration page and your custom domain name.

3. Summary

In this article, we introduced how to deploy Vue projects to Gitee Pages. With simple operations, you can quickly deploy your Vue project to a public access URL so that more people can access your Vue application. If you want to learn more about Vue and Gitee Pages, you are welcome to refer to official documentation and community resources to explore more development methods and technologies.

The above is the detailed content of How to deploy vue project to gitee. For more information, please follow other related articles on the PHP Chinese website!