vue cli 3.x 项目部署到 github pages的方法


Posted in Javascript onApril 17, 2019

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 请求。

参考

1.github pages 官方说明

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

以上所述是小编给大家介绍的vue cli 3.x 项目部署到 github pages的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
JS短路原理的应用示例 精简代码的途径
Dec 13 Javascript
使用JS+plupload直接批量上传图片到又拍云
Dec 01 Javascript
JavaScript使用cookie记录临时访客信息的方法
Apr 07 Javascript
究竟什么是Node.js?Node.js有什么好处?
May 29 Javascript
JavaScript中几种排序算法的简单实现
Jul 29 Javascript
JS基于设计模式中的单例模式(Singleton)实现封装对数据增删改查功能
Feb 06 Javascript
Vue表单输入绑定的示例代码
Nov 01 Javascript
JavaScript中的&quot;=、==、===&quot;区别讲解
Jan 22 Javascript
详解ES6中的Map与Set集合
Mar 22 Javascript
layer关闭当前窗口页面以及确认取消按钮的方法
Sep 09 Javascript
基于canvasJS在PHP中制作动态图表
May 30 Javascript
JavaScript 获取滚动条位置并将页面滑动到锚点
Feb 08 Javascript
详解vue开发中调用微信jssdk的问题
Apr 16 #Javascript
怎样使你的 JavaScript 代码简单易读(推荐)
Apr 16 #Javascript
vue微信分享的实现(在当前页面分享其他页面)
Apr 16 #Javascript
在Vue项目中使用snapshot测试的具体使用
Apr 16 #Javascript
vue.js中使用echarts实现数据动态刷新功能
Apr 16 #Javascript
详解vue-cli 脚手架 安装
Apr 16 #Javascript
详解jquery和vue对比
Apr 16 #jQuery
You might like
Ext.data.PagingMemoryProxy分页一次性读取数据的实现代码
2010/04/07 PHP
PHP使用DOMDocument类生成HTML实例(包含常见标签元素)
2014/06/25 PHP
详解Yii2 rules 的验证规则
2016/12/02 PHP
php删除二维数组中的重复值方法
2018/03/12 PHP
json-lib出现There is a cycle in the hierarchy解决办法
2010/02/24 Javascript
通过javascript的匿名函数来分析几段简单有趣的代码
2010/06/29 Javascript
理解Javascript_05_原型继承原理
2010/10/13 Javascript
一个封装js代码-----展开收起效果示例
2013/07/03 Javascript
JavaScript实现点击按钮后变灰避免多次重复提交
2013/07/15 Javascript
showModalDialog在谷歌浏览器下会返回Null的解决方法
2013/11/27 Javascript
点击按钮自动加关注的代码(sina微博/QQ空间/人人网/腾讯微博)
2014/01/02 Javascript
js实现三张图(文)片一起切换的banner焦点图
2015/08/25 Javascript
浅析Bootstrap表格的使用
2016/06/23 Javascript
JavaScript实现短信倒计时60s
2017/10/09 Javascript
在HTML文档中嵌入JavaScript的四种方法
2018/05/07 Javascript
JavaScript引用类型Date常见用法实例分析
2018/08/08 Javascript
vue弹出框组件封装实例代码
2019/10/31 Javascript
Vue中常用rules校验规则(实例代码)
2019/11/14 Javascript
vue项目中极验验证的使用代码示例
2019/12/03 Javascript
Vue在H5 项目中使用融云进行实时个人单聊通讯
2020/12/14 Vue.js
在Windows8上的搭建Python和Django环境
2014/07/03 Python
python实现图像识别功能
2018/01/29 Python
在Pycharm中修改文件默认打开方式的方法
2019/01/17 Python
详解用python写一个抽奖程序
2019/05/10 Python
Python实现简单的列表冒泡排序和反转列表操作示例
2019/07/10 Python
PYQT5开启多个线程和窗口,多线程与多窗口的交互实例
2019/12/13 Python
Tensorflow限制CPU个数实例
2020/02/06 Python
英国顶级足球鞋的领先零售商:Lovell Soccer
2019/08/27 全球购物
屈臣氏泰国官网:Watsons TH
2021/02/23 全球购物
电大自我鉴定
2013/10/27 职场文书
电焊工岗位职责
2014/03/06 职场文书
小学生开学第一课活动方案
2014/03/27 职场文书
只需要这一行代码就能让python计算速度提高十倍
2021/05/24 Python
vue实现锚点定位功能
2021/06/29 Vue.js
Redis中一个String类型引发的惨案
2021/07/25 Redis
Spring中的@Transactional的工作原理
2022/06/05 Java/Android