项目部署到Github-Page
问题描述
- 在将项目部署到
Github-Page 时浏览不到项目页面
解决方法
- 在
vue.config.js 中设置正确的publicPath
- 如果打算将项目部署到
https://<USERNAME>.github.io/ 上,publicPath 将默认被设为 “/”,你可以忽略这个参数 - 如果打算将项目部署到
https://<USERNAME>.github.io/<REPO>/ 上 (即仓库地址为 https://github.com/<USERNAME>/<REPO>) ,可将 publicPath 设为 “//”。 - 举个例子,如果仓库名字为
“my-project” ,那么 vue.config.js 的内容应如下所示:
module.exports = {
publicPath: process.env.NODE_ENV === 'production'
? '/my-project/'
: '/'
}
- 在项目目录下,创建如下的
deploy.sh (可以适当地取消注释)并运行它进行部署
#!/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 'deploy'
# 部署到 https://<USERNAME>.github.io
# git push -f git@github.com:<USERNAME>/<USERNAME>.github.io.git master
# 部署到 https://<USERNAME>.github.io/<REPO>
# git push -f git@github.com:<USERNAME>/<REPO>.git master:gh-pages
cd -
- 或者通过以下方式进行创建
Github 仓库与部署工作
#1. 先到`Github`创建仓库,复制仓库的`ssh`连接(推荐)
(也可以在本地`git init`后再`git remote add origin` + 仓库地址)
# 2. 再`build`后的项目`dist`下
git clone + ssh
(会自动创建与仓库名相同的文件夹)
# 3. 将所有文件移动到新的文件夹中(名称为仓库名)
# 4. `git add .`将所有文件标记提交
# 5. `git commit -m "提交信息"`
# 6. `git push -u origin master`
(在第一次git push加了-u后,再次git pull或者push就不需要加两个主机名了)
|