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

站长资源 2024/11/26 佚名

2 0 1

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的方法,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

vue,cli,3.x,部署,vue,github,pages

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

评论“vue cli 3.x 项目部署到 github pages的方法”

暂无评论...

www.wwsws.com 伏龙阁资源网

39,976影音资源

44,792技术资源

21,817软件资源

651,128站长资源

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？

更新日志

2024年11月26日

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

Vue项目路由刷新的实现代码

详解vue开发中调用微信jssdk的问题

评论“vue cli 3.x 项目部署到 github pages的方法”

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

更新日志

友情链接