Vue 项目部署到GitHub Pages

部署前注意事项

vue-router 不要开启 history 模式

正常项目中我们会因为网站路径中带有“#”而将vue-router开启history模式，以去掉#号。但开启history模式需要服务器的支持，因此在github pages中不支持这一模式，所以我们不能开启history模式。

在 vue.config.js 中设置正确的 publicPath

要将项目部署到 https://.github.io// 上 (即仓库地址为 https://github.com//)，可将 publicPath 设为 “//”。

  publicPath: process.env.NODE_ENV === 'production' ? '/project/' : '/',

然后可以直接将项目推送至仓库。

接下来部署

在项目根目录创建deploy.sh 文件

#!/usr/bin/env sh
 
# 当发生错误时中止脚本
set -e
 
# 构建
npm run build
 
# cd 到构建输出的目录下 
cd dist
 
git init
git add -A
git commit -m 'deploy'
 
# 部署到 https://<USERNAME>.github.io/<REPO>
git push -f git@github.com:<USERNAME>/<REPO>.git master:gh-pages
 
cd -

在项目目录下打开cmd命令窗口运行该文件

// Linux环境下
bash deploy.