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

2021-07-18  本文已影响0人  秋秋秋web

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  // 输出访问地址

上一篇 下一篇

猜你喜欢

热点阅读