How to deploy vue cli project to github pages

github pages is a free service provided by github to users, write blogs, or deploy some purely static projects.

Recently, the vue cli initialization project was deployed to github pages, and I stepped on some pitfalls, and the records are as follows.

/nusr/resume-vue

1. Do not enable history mode for vue-router

# in the path is ugly, so the history mode of vue-router is turned on and # is removed. History mode is also enabled by default when doing projects. After a long time of struggle, I found that I was deploying to github pages. The server was not configured, which caused the page to be unable to request it.

2. Configure publicUrl

The package path must also be configured separately, otherwise the page will not be requested.

For example, my project address is/nusr/resume-vue

I want to deploy to/resume-vue, then publicPath to be configured as /resume-vue

// 
 = {
 publicPath: .NODE_ENV === "production" ? "/resume-vue" : "/"
};

3. css introduces image error

When css introduces background images, there is no problem with the development environment, but once deployed, the image cannot be obtained.

The slightly modified code temporarily solved this problem.

<!---->
<template>
 <div >
  <router-view />
 </div>
</template>
<script>
export default {
 name: "App",
 mounted() {
  /**
    * Solve the problem that css introduces images in github pages cannot be obtained
    */
  const { NODE_ENV } = ;
   = NODE_ENV;
 }
};
</script>
<style lang="less">
@import "~@/assets/";
</style>

Configuring a top-level class for the html tag and writing different css solves this problem.

The real deployment environment is not like this. The deployment folder is the root directory, but the github pages deployment folder is not the root directory, so there is this problem.

// 
.development {
 background-image: url(/);
}
.production {
 background-image: url(/resume-vue/)
}

4. Automatic deployment of scripts

Create a new file in the root directory, and the file contents are as follows.

# 
# Stop when errorset -e
# Packnpm run build
# Enter the target foldercd dist
# Submit to local repositorygit init
git add -A
git commit -m 'deploy'
# Submit to the gh-pages branch of the :nusr/resume-vue projectgit push -f git@:nusr/ master:gh-pages
cd -

The deployment command is bash

Turn on github pages

Create a warehouse, the warehouse name is , must be in this format.

For example, my username is nusr, and the repository I created is。

The default open branch is gh-pages. You can enter the repository page and click Settings -> GitHub Pages to switch the displayed branch.

GitHub Pages supports customized domain names and supports jsonp requests.

refer to

1.github pages official description

2.vue cli deployment official instructions

The above is the method of deploying the vue cli project to github pages introduced by the editor. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to everyone in time. Thank you very much for your support for my website!
If you think this article is helpful to you, please reprint it. Please indicate the source, thank you!