如何将vue-cli3项目部署到githubpage运行

注意的点：
1，不能开启history模式：
history变为hash（默认）解决办法：
router.index中将如下两行注释掉

2，config/config.js中加入如下：

3，图片无法加载
解决办法：修改APP.vue

<!--App.vue-->
<template>
  <div id="app">
    <router-view />
  </div>
</template>
<script>
export default {
  name: "App",
  mounted() {
    /**
     * 解决 css 引入图片在 github pages 无法获取的问题
     */
    const { NODE_ENV } = process.env;
    document.documentElement.className = NODE_ENV;
  }
};
</script>
<style lang="less">
@import "~@/assets/global.less";
</style>

给 html 标签配置了一个顶级类，写上不同的 css 解决了这个问题。

真时的部署环境不是这样的，部署文件夹就是根目录，但 github pages 部署文件夹不是根目录，就有这个问题。

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

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

4，可以提交了

#在github上新建仓库名为username.github.io



#git clone......

# 进入目标文件夹
cd dist

# 打包
npm run build

# 提交到本地仓库

git add *
git commit -m 'deploy'
git push

5，github pages

建立仓库，仓库名称是 username.github.io ,必须是这种格式。
它还支持自定义域名