Github Pages is a free service that github provides for users to write blogs or deploy purely static projects.

Recently deployed the Vue CLI 3.x initialization project to Github Pages and stomped some holes, as noted below.

Github.com/nusr/resume…

1. Do not enable the history mode on vue-router

The # in the path is ugly, so the vue-router history mode is enabled and the # is removed. The history mode is also enabled by default when doing projects. After a long time, I found that I was deployed to Github Pages, the server is not configured, resulting in the page has not been requested.

2. The configurationpublicUrl

The package path should also be configured separately, otherwise the page cannot be requested.

Such as my project address is https://github.com/nusr/resume-vue

I to be deployed to https://nusr.github.io/resume-vue, then publicPath to configure/resume – vue

// vue.config.js
module.exports = {
  publicPath: process.env.NODE_ENV === "production" ? "/resume-vue" : "/"
};
Copy the code

3. CSS introduces image errors

There was no problem with the development environment when CSS introduced background images, but once deployed, the images were not available.

A slight change to the app. vue code fixes this problem for now.

<! --App.vue-->
<template>
  <div id="app">
    <router-view />
  </div>
</template>
<script>
export default {
  name: "App",
  mounted() {
    / * * * to solve CSS is introduced into image in making pages * / unable to get the problem
    const { NODE_ENV } = process.env;
    document.documentElement.className = NODE_ENV; }};</script>
<style lang="less">
@import "~@/assets/global.less";
</style>
Copy the code

This problem is solved by configuring a top-level class for THE HTML tag with different CSS.

In a real deployment environment, the deployment folder is the root directory, but github Pages deployment folder is not the root directory.

// global.less
.development {
  background-image: url(/background.png);
}

.production {
  background-image: url(/resume-vue/background.png)
}
Copy the code

4. Automatic deployment scripts

Create the deploy.sh file in the root directory with the following content:

# deploy.sh
Stop when an error occurs
set -e

# packaged
npm run build

Enter the target folder
cd dist

Commit to local repository

git init
git add -A
git commit -m 'deploy'

# gh - pages branch of submitted to the https://github.com:nusr/resume-vue project
git push -f [email protected]:nusr/resume-vue.git master:gh-pages

cd -
Copy the code

The deployment command is bash deploy.sh

Open making pages

Create repository username. Github. IO.

For example, if my username is nusr, the repository will be nusr.github.

Github Pages enables gh-Pages by default. To access the repository page, click Settings -> Github Pages to switch the displayed branches.

GitHub Pages supports custom domain names and jSONP requests.

reference

  1. Github Pages official description
  2. Vue CLI 3.x Deployment official description