vue项目部署到github并解决路径错误

cli.vuejs.org/zh/guide/de…
通过文档的平台指南，总结如何部署vue项目到github
gh-pages分支为build后dist文件的内容，主要提供pages预览
master分支可以上传源代码，作为代码仓库

0.本地预览

上传前确认打包文件成功运行
build打包文件

yarn build

安装静态服务器

npm install -g serve

预览

serve -s dist

1.vue.config.js

module.exports = {
 publicPath: process.env.NODE_ENV === 'production'
    ? '/仓库名称/'
    : '/',
}

2.新建deploy.sh文件

#!/usr/bin/env sh

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

# 构建
yarn 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:vouis/runing-record-money.git master:gh-pages
git push -f git@github.com:vouis/record-for-money.git master:gh-pages
cd -

通过ssh,在gh-pages分支内上传build后dist文件内容

3.运行 sh deploy.sh

脚本上传gh-pages分支文件

4.解决路径错误

本地预览时会加入github路径

yarn add cross-env

在 package.json 里添加一个 script，内容为

"build:dev":"cross-env NODE_ENV=development yarn build"

本地预览: yarn build:dev
GitHub Pages预览:yarn build