github pages 是 github 免费为用户提供的服务,写博客,或者部署一些纯静态项目。

最近将 vue cli 3.x 初始化项目部署到 github pages,踩了一些坑,记录如下。

https://github.com/nusr/resume-vue

1. vue-router 不要开启 history 模式

路径中的 # 比较丑,就开启了 vue-router 的 history 模式,去掉了 #。平时做项目也是默认开启 history 模式。折腾了半天发现,我这是部署到 github pages ,服务器没有配置,导致页面一直请求不到。

2. 配置 publicUrl

打包路径也要单独配置,否则也是请求不到页面。

比如我的项目地址是 https://github.com/nusr/resume-vue

我要部署到 https://nusr.github.io/resume-vue,那么 publicPath 要配置为 /resume-vue

  1. // vue.config.js
  2. module.exports = {
  3. publicPath: process.env.NODE_ENV === "production" ? "/resume-vue" : "/"
  4. };

3. css 引入图片错误

css 引入背景图片时,开发环境没有任何问题,但是一旦部署后,就无法获取图片了。

稍微改下 App.vue 的代码,暂时解决了这个问题。

  1. <!--App.vue-->
  2. <template>
  3. <div id="app">
  4. <router-view />
  5. </div>
  6. </template>
  7. <script>
  8. export default {
  9. name: "App",
  10. mounted() {
  11. /**
  12. * 解决 css 引入图片在 github pages 无法获取的问题
  13. */
  14. const { NODE_ENV } = process.env;
  15. document.documentElement.className = NODE_ENV;
  16. }
  17. };
  18. </script>
  19. <style lang="less">
  20. @import "~@/assets/global.less";
  21. </style>

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

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

  1. // global.less
  2. .development {
  3. background-image: url(/background.png);
  4. }
  5. .production {
  6. background-image: url(/resume-vue/background.png)
  7. }

4. 自动部署脚本

根目录下新建 deploy.sh 文件,文件内容如下。

  1. # deploy.sh
  2. # 错误时停止
  3. set -e
  4. # 打包
  5. npm run build
  6. # 进入目标文件夹
  7. cd dist
  8. # 提交到本地仓库
  9. git init
  10. git add -A
  11. git commit -m 'deploy'
  12. # 提交到 https://github.com:nusr/resume-vue 项目的 gh-pages 分支
  13. git push -f git@github.com:nusr/resume-vue.git master:gh-pages
  14. cd -

部署命令是 bash deploy.sh

开启 github pages

建立仓库,仓库名称是 username.github.io ,必须是这种格式。

比如我的用户名是 nusr,建立的仓库就是 nusr.github.io

github pages 默认开启分支是 gh-pages,可以进入该仓库页面,点击 Settings -> GitHub Pages,切换展示的分支。

GitHub Pages 支持定制域名,支持 jsonp 请求。

参考

  1. github pages 官方说明
  2. vue cli 3.x 部署官方说明

vue cli 3.x 项目部署到 github pages的更多相关文章

  1. 教你如何一步步将项目部署到Github

    注册Github账号有半年多的时间,却一直不知道如何将自己做好的项目部署到Github中.看了网上许多的教程,要么一开始就来Git命令行,要么直接就来一堆术语,很少能够真正说中要点,解决我们的烦恼. ...

  2. 将项目部署到github的方法

    GitHub是一个面向开源及私有软件项目的托管平台,因为只支持git 作为唯一的版本库格式进行托管,故名GitHub. GitHub于2008年4月10日正式上线,除了Git代码仓库托管及基本的 We ...

  3. vue cli创建typescript项目

    使用最新的Vue CLI @vue/cli创建typescript项目,使用vue -V查看当前的vue cli版本 安装命令 npm install -g @vue-cli 创建项目 vue cre ...

  4. Hexo搭建博客教程(3) - 远程部署到GitHub Pages

    本章讲的是如何将本地的个人项目远程部署到 GitHub Pages,涉及到GitHub的项目仓库.Git的使用,以及Hexo的远程部署等. 1. 安装 hexo-deployer-git 插件 想要将 ...

  5. 基于Hexo搭建博客并部署到Github Pages

    基于Hexo搭建博客并部署到Github Pages 之前在简书上写东西,觉得自己还是太浮躁.本来打算用Flask自己写一个,以为是微框架就比较简单,naive.HTML.CSS.JS等都要学啊,我几 ...

  6. create-react-app部署到GitHub Pages时报错:Failed to get remote。origin.url

    最近使用create-react-app脚手架开发了一个私人博客:点击跳转,在部署到GitHub Pages的时候报了一个错误,具体如下: 在create-react-app的GitHub库的issu ...

  7. Linux下使用 github+hexo 搭建个人博客02-hexo部署到Github Pages

    之前的这篇文章<Linux下使用 github+hexo 搭建个人博客01-hexo搭建>,相信大家都知道怎么搭建 hexo ,怎么切换主题,并且完成了一篇博文的创建,以及 MarkDow ...

  8. Note | 用Hugo搭建博客并部署到GitHub Pages

    目录 1. 本地搭建 1.1 安装Hugo 1.2 创建站点 1.3 新建页面和文章 1.4 使用主题 1.5 修改配置文件 1.6 预览 2. 部署 之前担心过现有博客平台(如博客园,CSDN)突然 ...

  9. 基于@vue/cli 的构建项目(3.0)

    1.检测node的版本号 注意:1.Vue CLI需要Node.js的版本 8.9+(推荐8.11.0+) 所以在安装Vue CLI之前先看下node的版本 node -v 2.安装@vue/cli ...

随机推荐

  1. tkinter调取签名网而设计签名页面

    # --*-- coding:utf-8 --*-- import tkinter as tk import re import requests from tkinter import messag ...

  2. range与enumerate的区别

    在迭代中enumerate比range更能灵活,一般情况下尽量用erumerate,下面举例说明: 先来看range的使用: city_list = ['beijing', 'shanghai', ' ...

  3. 8. 使用ueditor添加文章

    ueditor是一个很好用的html编辑器,不仅提供了格式化编辑文本的功能,还提供了自动上传图片的功能,现在就使用该编辑器来实现博客文章的编辑功能.1. 使用ueditor过程中会请求一个后台js文件 ...

  4. Guava新增集合类型-Multimap

    Guava新增集合类型-Multimap 在日常的开发工作中,我们有的时候需要构造像Map<K, List<V>>或者Map<K, Set<V>>这样比 ...

  5. MFC中ComboBox控件用法

    MFC ComboBox 一.入门篇 ComboBox (组合框)控件很简单,可以节省空间.从用户角度来看,这个控件是由一个文本输入控件和一个下拉菜单组成的.用户可以从一个预先定义的列表里选择一个选项 ...

  6. 【bzoj 2916】[Poi1997]Monochromatic Triangles

    题目描述        空间中有n个点,任意3个点不共线.每两个点用红线或者蓝线连接,如果一个三角形的三边颜色相同,那么称为同色三角形.给你一组数据,计算同色三角形的总数.          输入 第 ...

  7. bzoj 3239 poj 2417 BSGS

    BSGS算法,预处理出ϕ(c)−−−−√内的a的幂,每次再一块一块的往上找,转移时将b乘上逆元,哈希表里O(1)查询即可 #include<cstdio> #include<cstr ...

  8. BZOJ_4551_[Tjoi2016&Heoi2016]树_树剖+线段树

    BZOJ_4551_[Tjoi2016&Heoi2016]树_树剖+线段树 Description 在2016年,佳媛姐姐刚刚学习了树,非常开心.现在他想解决这样一个问题:给定一颗有根树(根为 ...

  9. 【CTF 攻略】CTF比赛中关于zip的总结

    [CTF 攻略]CTF比赛中关于zip的总结   分享到: --> 本文首发于安全客,建议到原地址阅读,地址:http://bobao.360.cn/ctf/detail/203.html 前言 ...

  10. exgcd学习笔记

    扩展欧几里得算法是当已知a和b时,求得一组x和y使得 首先,根据数论中的相关定理,解一定存在        //留坑待填 之后我们可以推一推式子 将a替换掉 展开括号 提出b,合并 且 设 现在已经将 ...