如何部署自己的vue组件到git

1、允许yarn build 打包产生dist文件

2、进入到dist目录下

3、执行以下命令(新建的git项目中也有)

git init

git add .

git commit -m "your commit"

git branch -M master

git remote add origin // 以git@开头的仓库地址

git push -f -u origin master

4、到git 仓库code查看项目提交情况,可以到setting去设置预览地址


点setting


点击


选择分支,确定,上面蓝色区域地址后面加index.html访问

5、访问示例:https://704377078.github.io/cloud-ui/index.html

6、若有资源出现404点情况,请到vue.config.js检查设置


可参考配置


dist目录示例

git有时候不是很稳定,可以多试几次

7、快捷添加项目访问地址,下次可以直接点右侧访问:


8、自动化脚本:

要求: 安装Git Bash 或 Cmder 

在当前项目根目录添加 deploy.sh,内容如下图

在控制台中输入命令:sh deploy.sh 回车

rm -rf dist && // 移除旧dist包

yarn build && // 重新打包

cd dist &&  // 进入dist目录下

git init &&  // 初始化

git add . &&  // 提交更改文件

git commit -m 'update' &&  // 提交代码

git branch -M master &&  // 提交分支

git remote add origin git@github.com:704377078/cloud-ui.git // git仓库地址

git push -f -u origin master && // 推送提交

cd - // 等价于cd .. 回到上一层目录

echo https://704377078.github.io/cloud-ui/index.html  // 输出访问地址

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容