vue cli 3.x 项目部署到 github pages
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
// vue.config.js
module.exports = {
publicPath: process.env.NODE_ENV === "production" ? "/resume-vue" : "/"
};
3. css 引入图片错误
css 引入背景图片时,开发环境没有任何问题,但是一旦部署后,就无法获取图片了。
稍微改下 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. 自动部署脚本
根目录下新建 deploy.sh 文件,文件内容如下。
# deploy.sh
# 错误时停止
set -e
# 打包
npm run build
# 进入目标文件夹
cd dist
# 提交到本地仓库
git init
git add -A
git commit -m 'deploy'
# 提交到 https://github.com:nusr/resume-vue 项目的 gh-pages 分支
git push -f git@github.com:nusr/resume-vue.git master:gh-pages
cd -
部署命令是 bash deploy.sh
开启 github pages
建立仓库,仓库名称是 username.github.io ,必须是这种格式。
比如我的用户名是 nusr,建立的仓库就是 nusr.github.io。
github pages 默认开启分支是 gh-pages,可以进入该仓库页面,点击 Settings -> GitHub Pages,切换展示的分支。
GitHub Pages 支持定制域名,支持 jsonp 请求。
参考
vue cli 3.x 项目部署到 github pages的更多相关文章
- 教你如何一步步将项目部署到Github
注册Github账号有半年多的时间,却一直不知道如何将自己做好的项目部署到Github中.看了网上许多的教程,要么一开始就来Git命令行,要么直接就来一堆术语,很少能够真正说中要点,解决我们的烦恼. ...
- 将项目部署到github的方法
GitHub是一个面向开源及私有软件项目的托管平台,因为只支持git 作为唯一的版本库格式进行托管,故名GitHub. GitHub于2008年4月10日正式上线,除了Git代码仓库托管及基本的 We ...
- vue cli创建typescript项目
使用最新的Vue CLI @vue/cli创建typescript项目,使用vue -V查看当前的vue cli版本 安装命令 npm install -g @vue-cli 创建项目 vue cre ...
- Hexo搭建博客教程(3) - 远程部署到GitHub Pages
本章讲的是如何将本地的个人项目远程部署到 GitHub Pages,涉及到GitHub的项目仓库.Git的使用,以及Hexo的远程部署等. 1. 安装 hexo-deployer-git 插件 想要将 ...
- 基于Hexo搭建博客并部署到Github Pages
基于Hexo搭建博客并部署到Github Pages 之前在简书上写东西,觉得自己还是太浮躁.本来打算用Flask自己写一个,以为是微框架就比较简单,naive.HTML.CSS.JS等都要学啊,我几 ...
- create-react-app部署到GitHub Pages时报错:Failed to get remote。origin.url
最近使用create-react-app脚手架开发了一个私人博客:点击跳转,在部署到GitHub Pages的时候报了一个错误,具体如下: 在create-react-app的GitHub库的issu ...
- Linux下使用 github+hexo 搭建个人博客02-hexo部署到Github Pages
之前的这篇文章<Linux下使用 github+hexo 搭建个人博客01-hexo搭建>,相信大家都知道怎么搭建 hexo ,怎么切换主题,并且完成了一篇博文的创建,以及 MarkDow ...
- Note | 用Hugo搭建博客并部署到GitHub Pages
目录 1. 本地搭建 1.1 安装Hugo 1.2 创建站点 1.3 新建页面和文章 1.4 使用主题 1.5 修改配置文件 1.6 预览 2. 部署 之前担心过现有博客平台(如博客园,CSDN)突然 ...
- 基于@vue/cli 的构建项目(3.0)
1.检测node的版本号 注意:1.Vue CLI需要Node.js的版本 8.9+(推荐8.11.0+) 所以在安装Vue CLI之前先看下node的版本 node -v 2.安装@vue/cli ...
随机推荐
- tkinter调取签名网而设计签名页面
# --*-- coding:utf-8 --*-- import tkinter as tk import re import requests from tkinter import messag ...
- range与enumerate的区别
在迭代中enumerate比range更能灵活,一般情况下尽量用erumerate,下面举例说明: 先来看range的使用: city_list = ['beijing', 'shanghai', ' ...
- 8. 使用ueditor添加文章
ueditor是一个很好用的html编辑器,不仅提供了格式化编辑文本的功能,还提供了自动上传图片的功能,现在就使用该编辑器来实现博客文章的编辑功能.1. 使用ueditor过程中会请求一个后台js文件 ...
- Guava新增集合类型-Multimap
Guava新增集合类型-Multimap 在日常的开发工作中,我们有的时候需要构造像Map<K, List<V>>或者Map<K, Set<V>>这样比 ...
- MFC中ComboBox控件用法
MFC ComboBox 一.入门篇 ComboBox (组合框)控件很简单,可以节省空间.从用户角度来看,这个控件是由一个文本输入控件和一个下拉菜单组成的.用户可以从一个预先定义的列表里选择一个选项 ...
- 【bzoj 2916】[Poi1997]Monochromatic Triangles
题目描述 空间中有n个点,任意3个点不共线.每两个点用红线或者蓝线连接,如果一个三角形的三边颜色相同,那么称为同色三角形.给你一组数据,计算同色三角形的总数. 输入 第 ...
- bzoj 3239 poj 2417 BSGS
BSGS算法,预处理出ϕ(c)−−−−√内的a的幂,每次再一块一块的往上找,转移时将b乘上逆元,哈希表里O(1)查询即可 #include<cstdio> #include<cstr ...
- BZOJ_4551_[Tjoi2016&Heoi2016]树_树剖+线段树
BZOJ_4551_[Tjoi2016&Heoi2016]树_树剖+线段树 Description 在2016年,佳媛姐姐刚刚学习了树,非常开心.现在他想解决这样一个问题:给定一颗有根树(根为 ...
- 【CTF 攻略】CTF比赛中关于zip的总结
[CTF 攻略]CTF比赛中关于zip的总结 分享到: --> 本文首发于安全客,建议到原地址阅读,地址:http://bobao.360.cn/ctf/detail/203.html 前言 ...
- exgcd学习笔记
扩展欧几里得算法是当已知a和b时,求得一组x和y使得 首先,根据数论中的相关定理,解一定存在 //留坑待填 之后我们可以推一推式子 将a替换掉 展开括号 提出b,合并 且 设 现在已经将 ...