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 相关文章推荐
如何实现动态删除javascript函数
May 27 Javascript
flash遮住div问题的正确解决方法
Feb 27 Javascript
Jquery网页内滑动缓冲导航的实现代码
Apr 05 Javascript
jquery实现简单实用的弹出层效果代码
Oct 15 Javascript
详解Vue2 无限级分类(添加,删除,修改)
Mar 07 Javascript
JavaScript 数据类型详解
Mar 13 Javascript
详解如何去除vue项目中的#——History模式
Oct 13 Javascript
JavaScript内置对象math,global功能与用法实例分析
Jun 10 Javascript
js判断鼠标移入移出方向的方法
Jun 24 Javascript
Vue中添加滚动事件设置的方法详解
Sep 14 Javascript
ant design vue datepicker日期选择器中文化操作
Oct 28 Javascript
js实现头像上传并且可预览提交
Dec 25 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
PHP syntax error, unexpected $end 错误的一种原因及解决
2008/10/25 PHP
PHP流Streams、包装器wrapper概念与用法实例详解
2017/11/17 PHP
详解PHP中的外观模式facade pattern
2018/02/05 PHP
jQuery powerFloat万能浮动层下拉层插件使用介绍
2010/12/27 Javascript
Js实现动态添加删除Table行示例
2014/04/14 Javascript
jQuery实现连续动画效果实例分析
2015/10/09 Javascript
详解NodeJs支付宝移动支付签名及验签
2017/01/06 NodeJs
vue-router路由参数刷新消失的问题解决方法
2017/06/17 Javascript
Bootstrap modal只加载一次数据的解决办法(推荐)
2017/11/24 Javascript
vue-cli项目无法用本机IP访问的解决方法
2018/09/20 Javascript
[02:11]DOTA2上海特级锦标赛主赛事第二日RECAP
2016/03/04 DOTA
[33:42]LGD vs OG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python中的包和模块实例
2014/11/22 Python
使用Python的判断语句模拟三目运算
2015/04/24 Python
Python中Django框架下的staticfiles使用简介
2015/05/30 Python
在python3环境下的Django中使用MySQL数据库的实例
2017/08/29 Python
解决python3 安装完Pycurl在import pycurl时报错的问题
2018/10/15 Python
python使用xlrd模块读取xlsx文件中的ip方法
2019/01/11 Python
Python 移动光标位置的方法
2019/01/20 Python
Python多项式回归的实现方法
2019/03/11 Python
django 使用全局搜索功能的实例详解
2019/07/18 Python
Python监听键盘和鼠标事件的示例代码
2020/11/18 Python
html特殊符号示例 html特殊字符编码对照表
2014/01/14 HTML / CSS
化石印度尼西亚在线商店:Fossil Indonesia
2019/03/11 全球购物
June Jacobs尊积帕官网:知名的spa水疗护肤品牌
2019/03/21 全球购物
优秀团支部事迹材料
2014/02/08 职场文书
幼儿教师国培感言
2014/02/19 职场文书
生日主持词
2014/03/20 职场文书
消防工作实施方案
2014/06/09 职场文书
教代会开幕词
2015/01/28 职场文书
2015年共青团工作总结
2015/05/15 职场文书
小学英语教学经验交流材料
2015/11/02 职场文书
员工安全责任协议书
2016/03/22 职场文书
nginx安装以及配置的详细过程记录
2021/09/15 Servers
springboot读取resources下文件的方式详解
2022/06/21 Java/Android
js 实现Material UI点击涟漪效果示例
2022/09/23 Javascript