vuecli3.x项目如何部署到githubpages

这篇文章主要介绍了vue cli 3.x项目如何部署到github pages，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

紫云网站建设公司创新互联,紫云网站设计制作，有大型网站制作公司丰富经验。已为紫云1000+提供企业网站建设服务。企业网站搭建\成都外贸网站制作要多少钱，请找那个售后服务好的紫云做网站的公司定做！

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 的代码，暂时解决了这个问题。

@import "~@/assets/global.less";

给 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”这篇文章对大家有帮助，同时也希望大家多多支持创新互联，关注创新互联行业资讯频道，更多相关知识等着你来学习!