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

发布 : 2019-05-14 分类 : web前端 浏览 :

1. vue-router 不要开启history模式

vue-router包括两种模式:history和hash模式,开启hash模式,项目路径就会包含#,外观不是很好看。
history模式项目路径就没有#符号,但是访问项目就会出现访问不到现象。

2. 配置publivUrl

在vue项目目录下添加vue.config.js文件,具体配置如下:

1
2
3
4
5
module.exports = {
publicPath: process.env.NODE_ENV === 'production'
? '/hello-world/'
: '/'
}

hello-word 是项目名

3. 自动部署脚本

在项目目录下新建deploy.sh文件,文件内容如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
#!/usr/bin/env sh

# 当发生错误时中止脚本
set -e

# 构建
npm run build

# cd 到构建输出的目录下
# cd dist

# 部署到自定义域域名
# echo 'www.example.com' > CNAME

git init
git add -A
git commit -m '部署测试'

# 部署到 https://<USERNAME>.github.io
# git push -f git@github.com:xjinky/xjinky.github.io.git master

# 部署到 https://<USERNAME>.github.io/<REPO>
# git push -f https://github.com/xjinky/hello-world.git master:gh-pages # 提交到gh-master分支

git push -f https://github.com/xjinky/hello-world.git master # 提交到master分支

cd -

4. 开启GitHub Pages

新建一个仓库,进入仓库设置页面,找到GitHub Pages,将Source设置成gh-pages branch,如图所示:

5. 测试

以上步骤都完成了,项目就能通过域名访问了,域名格式:github用户名.github.io/项目名
打开浏览器,输入域名即可访问,第一次访问可以比较慢,耐心等待即可!

参考

  1. github pages 官方说明
  2. vue cli 3.x 部署官方说明

知识 & 情怀 | 二者兼得

微信扫一扫, 向我投食

微信扫一扫, 向我投食

支付宝扫一扫, 向我投食

支付宝扫一扫, 向我投食

留下足迹