Shulou(Shulou.com)05/31 Report--

This article introduces the knowledge of "how to package and deploy Vue projects into GitHub Pages". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Preparation in advance

Compile and debug a passed Vue project

Push local projects to the default master branch of the Github remote warehouse

There are not too many articles and tutorials in steps 1 and 2, which are skipped here.

Important explanation

About publicPath of the Vue project

If you plan to publish to https://.github.io/, you can omit this step because publicPath is "/" by default.

If you plan to publish to https://.github.io// (that is, your warehouse is in https://github.com//), set publicPath to "/ /".

That's the name of your warehouse.

Step 1

Execute npm run build to package the Vue project, and there will be an extra dist directory under the project directory.

Step 2

Push dist to remote warehouse (default is master branch)

Usually, the dist directory will be ignored by git. You need to delete the dist from the ignored file, and then push the dist directory to the remote repository.

Step 3

? Use git subtree push-- prefix dist origin gh-pages to push the dist directory to the remote gh-pages branch. If the remote does not have a gh-pagse branch, it will create a new gh-pagse branch and then push it.

Note: only the gh-pages branch can use the GitHub pages function here.

Step 4

Log in to the remote GitHub repository and set gh-pages to the source of GitHub pages through setting-> github pages-> source

Step 5

Access the GitHub pages link

Step 6

Perform step 2 and step 3 again after each npm run build execution

This is the end of the content of "how to package and deploy Vue projects into GitHub Pages". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.