How to deploy vue static page in code cloud

With the continuous development of front-end technology, more and more companies and individuals are beginning to use Vue.js to develop front-end applications. For Vue.js developers, how to deploy Vue static pages has become a necessary skill.

Code Cloud is a domestic open source code hosting platform. In order to help Vue.js developers better deploy projects to the cloud, this article will introduce how to use Code Cloud to deploy Vue static pages.

1. Preparation

Before deploying Vue static pages, we need to ensure that our project has been successfully built. In Vue.js projects, Vue CLI is usually used to build. The output of the build will generate a dist directory, which contains all static resources and code.

2. Create a warehouse and upload code

First, we need to create a warehouse on the code cloud. Log in to Code Cloud, enter "Code Cloud", select "Create Warehouse", and then fill in the corresponding information to complete the creation of the warehouse.

After completing the creation of the warehouse, we need to upload the local code to the warehouse. In the root directory of the local Vue project, use the following command:

git init
git add .
git commit -m 'first commit'
git remote add origin <仓库地址>
git push -u origin master

This will successfully upload our code to the code cloud warehouse.

3. Configuring the warehouse

After we upload the code, we also need to configure the settings of the warehouse to ensure that our webpage can run correctly in the browser.

Select "Settings" in the warehouse and add the public key in the "Deployment Public Key" column. There are two ways to add it: directly upload the local public key or use the key generated by Code Cloud.

After the addition is completed, we need to create a new branch in the warehouse. The branch name can be arbitrary. Then select "Static Page" in the branch's settings.

In the static page, we need to select GitHub Pages as the service provider, and select the branch as the branch we just created.

Next, we need to fill in the entry file of our static page, which here refers to our home page file, usually index.html. After the branch and entry file settings are completed, we can click the "Save" button to complete the warehouse configuration.

4. View Page

After completing the configuration, we can now access our static page through the browser. On the home page of the warehouse, we can see a "Git Pages" button. Click it to access our deployment web page.

It should be noted that we are using GitHub Pages, which will use our warehouse name as the domain name by default. Therefore, when accessing the page, you need to add "/" and the entry file name after the warehouse name. For example:

https://用户名.gitee.io/仓库名/index.html

5. Deployment updates

After we complete the first deployment, our project may be updated frequently. So how can we update the new code to our deployment web page? The following are the specific steps:

First, we need to rebuild the code in the local project using the following command:

npm run build

This will automatically generate a new dist folder, containing our newly modified code.

Next, we need to use the following command in the code cloud warehouse to push the new code to our newly created branch:

git push origin 分支名

After the upload is completed, we can browse The updated static page can be viewed directly in the server.

Summary

Through the introduction of this article, we have learned how to use Code Cloud to deploy Vue static pages. In actual development, we can configure and customize it according to different specific situations. Hope this article is helpful to everyone.

The above is the detailed content of How to deploy vue static page in code cloud. For more information, please follow other related articles on the PHP Chinese website!