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 的代码,暂时解决了这个问题。
给 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”这篇文章对大家有帮助,同时也希望大家多多支持创新互联,关注创新互联行业资讯频道,更多相关知识等着你来学习!
文章题目:vuecli3.x项目如何部署到githubpages
链接地址:http://myzitong.com/article/jhejed.html