vue cli 3.x 项目部署到 github pages的方法
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 请求。
参考
以上所述是小编给大家介绍的vue cli 3.x 项目部署到 github pages的方法,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
相关推荐
-
在GitHub Pages上使用Pelican搭建博客的教程
Pelican 介绍 首先看看 Pelican 的一些主要特性: Python实现,开放源码 输出静态页面,方便托管 支持主题,采用Jajin2模板引擎 支持代码语法高亮 支持reStructuredText.Markdown.AsciiDoc格式 支持Disqus评论 支持Atom和RSS输出 这些特性都是大爱,完全满足我对博客系统的基本需求,再配合免费无限制的GitHub Pages,一切近乎完美了. 安装 Pelican 开始前请自行安装Python环境,支持2.7.X和3.3+,为方便,
-
解决vue-cli3 使用子目录部署问题
在使用 vue-cli3 build的时候,使用非子目录需要在 vue.config.js 中添加如下代码: module.exports = { baseUrl: process.env.NODE_ENV === 'production' ? '/dist/' : '/', } 但是build完后,放在nginx服务下,会看到如下报错,页面也显示 no-script 的内容 [Vue warn]: You are using the runtime-only build of Vue wher
-
vue-cli3 项目从搭建优化到docker部署的方法
1. 创建一个vue项目 相信大部分人都已经知道怎么创建项目的,可以跳过这一节,看下一节. 1.1 安装@vue/cli # 全局安装 vue-cli脚手架 npm install -g @vue/cli 等待安装完成后开始下一步 1.2 初始化项目 vue create vue-cli3-project (1)选择一个预设 可以选择默认预设,默认预设包含了 babel , eslint 我们选择更多功能 Manually select features 回车后来到选择插件 (2)插件选择 这边
-
vue-cli整合vuex的时候,修改actions和mutations,实现热部署的方法
在store.js里面添加如下的代码就可以了: // 热重载 if (module.hot) { // 指定要监控的文件 module.hot.accept(['./mutations'], () => { const mutations = require('./mutations').default // Vuex 提供的热重载接口 store.hotUpdate({ mutations }) }) } 以上这篇vue-cli整合vuex的时候,修改actions和mutations,实现热
-
nginx部署访问vue-cli搭建的项目的方法
从vue-router官网了解到如果是用history模式构建的vue项目打包后是需要后端配置支持的,而hash是不需要的,只不过地址会多了一个#/的后缀.使用hash模式构建的项目打包后,我只需要使用webstorm之类的软件打开访问就能成功了. 但是我用history模式构建的项目需要借助后台技术,我这里选用的是nginx反向代理来部署项目.具体做法如下: 1.创建后台服务器 对象 upstream mixVueServer{ server baidu.com;#这里是自己服务器域名 } 2
-
vue cli 3.x 项目部署到 github pages的方法
github pages 是 github 免费为用户提供的服务,写博客,或者部署一些纯静态项目. 最近将 vue cli 3.x 初始化项目部署到 github pages,踩了一些坑,记录如下. https://github.com/nusr/resume-vue 1. vue-router 不要开启 history 模式 路径中的 # 比较丑,就开启了 vue-router 的 history 模式,去掉了 #.平时做项目也是默认开启 history 模式.折腾了半天发现,我这是部署到 g
-
Vue项目打包部署到GitHub Pages的实现步骤
目录 前言 前期准备 重要说明 步骤1 步骤2 步骤3 步骤4 步骤5 步骤6 前言 关于什么是github pages?怎样创建github 仓库上传本地项目到GitHub远程仓库?等基本操作本文不再赘述,初学者可以通过搜索找到大量文章教程.本文重点在于: 如何将vue项目源码(含dist目录)同步到到github仓库,同时单独将项目下的dist目录同步到gh-pages分支以便使用GitHub pages 发布和预览静态网页. 针对以上问题,作者以往的做法是将Vue项目源码托管到源码仓库,然
-
vue cli构建的项目中请求代理与项目打包问题
在上篇文章给大家介绍了vue-cli webpack模板项目搭建及打包时路径问题的解决方法,可以点击查看. vue-cli构建的项目中,生产模式下的打包路径.与生产模式下的请求代理简单示意 总结 以上所述是小编给大家介绍的vue cli构建的项目中请求代理与项目打包问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的.在此也非常感谢大家对我们网站的支持! 您可能感兴趣的文章: Vue-cli创建项目从单页面到多页面的方法 Vue使用vue-cli创建项目 vue-cli项
-
使用Vue CLI创建typescript项目的方法
使用最新的Vue CLI @vue/cli创建typescript项目,使用vue -V查看当前的vue cli版本 安装命令 npm install -g @vue-cli 创建项目 vue create my-vue-typescript 上下键选择,空格键确定 接下来是一些常规选项 下面是询问要不要记录这次配置以便后面直接使用,我们选择y 当确定配置后会在C:\Users\Administrator\.vuerc下生成一个刚选好的配置记录 { "useTaobaoRegistry"
-
flask和vue前后端分离项目部署的示例代码
前段时间开发了一个项目, 我后端用的是flask框架写接口,前端用的是vue框架,项目前后端完全分离,部署的时候遇到一点问题,记录一下. 部署环境:centos6.5.Python3.6.3 .flask0.12.0 vue 部署方式:uwsgi+nginx 步骤: 1.首先安装python运行环境,正常 2.安装uswsgi运行,正常(使用pip安装,pip install uwsgi): 新建config.ini文件 [uwsgi] # uwsgi 启动时所使用的地址与端口,ngin
-
Vue-cli项目部署到Nginx服务器的方法
0. Nginx使用 以windows版为例,下载niginx压缩包并解压到任意目录,双击nginx.exe,在浏览器中访问http://localhost,如果出现Welcome to nginx!页面则说明成功. nginx常用命令如下: nginx -h # 打开帮助 nginx -t # 检查配置文件是否正确 # 以下命令均要先启动nginx才能执行 nginx -s stop # 停止 nginx -s quit # 退出 nginx -s reopen # 重新启动(注意不会重新读取
-
SpringBoot项目部署到服务器上的方法（Jar包）
1. 部署方式 Springboot 和普通web 应用程序不一样,其本质上是一个 Java 应用程序,那么又如何部署呢? 通常来说,Springboot 部署会采用两种方式:全部打包成一个jar,或者打包成一个war.现在讲一下打包成 jar 部署. 2. 打包成 jar 第一种方法(idea) 1. clean 2. package 第二种方法(命令行): 键盘输入 windows + r : cd 命令切换到你项目所在路径: online 是我的项目名称,这里换成你自己的,可以看到当前是
-
Vue 项目部署到服务器的问题解决方法
相信很多小伙伴在用Vue-cli安装的脚手架开发的时候,在开发环境中项目可以很正常的运行,但是进入到生产环境,编译打包后,放入服务器,项目就不正常了,会出现空白页或者路由跳转404等问题.遇到这些问题不要慌张,正确的配置加上后端的简单配合就可以解决. 如何打包 基于Vue-Cli,通过npm run build来进行打包的操作 如何部署 将打包出来的资源,基于Vue-Cli的一般是dist目录下有static目录和index.html文件,可以直接将这两个文件扔到服务端 但有时候,我们会直接将d
-
使用 Github Actions 自动部署 Angular 应用到 Github Pages的方法
前言 最近在学习 Angular,一些基础的语法也学习的差不多了,就在 github 上新建了一个代码仓库,准备用 ng-zorro 搭个后台应用的模板,方便自己以后写些小东西时可以直接使用.前端项目,最主要的还是能够实际看到,因此考虑找个地方部署,因为自己的博客是部署到 github page 上的,并且这个项目也只是一个静态网站,所以这里同样选择使用 github page 同时,考虑到发布项目时,虽然使用 github page 已经帮我们省略了拷贝文件到服务器上这一步,但是还是需要自己手
-
Vue CLI 3.x 自动部署项目至服务器的方法
前言 平时部署前端项目流程是:先部署到测试环境ok后再发布到生产环境上,部署到测试环境用 xshell 连上服务器,然后用 xftp 连接服务器,然后本地 build 项目,接着把 build 好的文件通过 xftp 上传到服务器上,整个流程感觉稍有繁琐,重复. 本教程讲解的是 Vue-CLI 3.x 脚手架搭建的vue项目, 利用scp2自动化部署到静态文件服务器 Nginx 一 安装scp2 scp2是一个基于ssh2增强实现,纯粹使用JavaScript编写. 而ssh2就是一个使用nod