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之可拖动的iframe效果代码
Aug 01 Javascript
浅析LigerUi开发中谨慎载入common.css文件
Jul 09 Javascript
JS点击链接后慢慢展开隐藏着图片的方法
Feb 17 Javascript
HTML5使用DeviceOrientation实现摇一摇功能
Jun 05 Javascript
jQuery实现动态添加和删除一个div
Aug 12 Javascript
js实现为a标签添加事件的方法(使用闭包循环)
Aug 02 Javascript
jQuery与JavaScript节点创建方法的对比
Nov 18 Javascript
canvas实现动态小球重叠效果
Feb 06 Javascript
javascript与PHP动态往类中添加方法对比
Mar 21 Javascript
详解webpack4多入口、多页面项目构建案例
May 25 Javascript
中高级前端必须了解的JS中的内存管理(推荐)
Jul 04 Javascript
vue使用echarts实现水平柱形图实例
Sep 09 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新手上路(十二)
2006/10/09 PHP
PHP 小心urldecode引发的SQL注入漏洞
2011/10/27 PHP
搭建基于Docker的PHP开发环境的详细教程
2015/07/01 PHP
php变量与JS变量实现不通过跳转直接交互的方法
2017/08/25 PHP
一种JavaScript的设计模式
2006/11/22 Javascript
javascript appendChild,innerHTML,join性能比较代码
2009/08/29 Javascript
24款非常有用的 jQuery 插件分享
2011/04/06 Javascript
利用JS解决ie6不支持max-width,max-height问题的方法
2014/01/02 Javascript
javaScript中的this示例学习详解及工作原理
2014/01/13 Javascript
使用js画图之饼图
2015/01/12 Javascript
jquery实现华丽的可折角广告代码
2015/09/02 Javascript
Clipboard.js 无需Flash的JavaScript复制粘贴库
2015/10/02 Javascript
JS中生成随机数的用法及相关函数
2016/01/09 Javascript
jquery dialog获取焦点的方法
2017/02/09 Javascript
bootstrap表单按回车会自动刷新页面的解决办法
2017/03/08 Javascript
jQuery实现Select下拉列表进行状态选择功能
2017/03/30 jQuery
详解Angular-cli生成组件修改css成less或sass的实例
2017/07/27 Javascript
JQuery元素快速查找与操作
2018/04/22 jQuery
vue引入axios同源跨域问题
2018/09/27 Javascript
微信小程序页面调用自定义组件内的事件详解
2019/09/12 Javascript
javascript操作元素的常见方法小结
2019/11/13 Javascript
python将人民币转换大写的脚本代码
2013/02/10 Python
Atom的python插件和常用插件说明
2018/07/08 Python
Python3实现定时任务的四种方式
2019/06/03 Python
python 实现将文件或文件夹用相对路径打包为 tar.gz 文件的方法
2019/06/10 Python
在django中自定义字段Field详解
2019/12/03 Python
Python 模拟生成动态产生验证码图片的方法
2020/02/01 Python
Python递归实现打印多重列表代码
2020/02/27 Python
Python 可视化神器Plotly详解
2020/12/26 Python
用HTML5中的Canvas结合公式绘制粒子运动的教程
2015/05/08 HTML / CSS
晚宴邀请函范文
2014/01/15 职场文书
食品安全工作实施方案
2014/03/26 职场文书
爱我中华教学反思
2014/04/28 职场文书
车间核算员岗位职责
2014/07/01 职场文书
活动总结格式
2014/08/30 职场文书
运动会100米加油稿
2015/07/21 职场文书