Gitee 部署vue-cli3项目

话不多说,我们先来了解一下什么是gitee pages。

1.首先我们进入到自己的gitee仓库里(这里忽略你已经创建过属于你自己的线上仓库了[手动滑稽]),在仓库名称下面我们会发现有一个服务的文字,当我们点开它就能看到Gitee Pages几个大字了

Gitee 部署vue-cli3项目

 

2.点击进入后,我们会看到对Gitee Pagesd的功能简介,其重要功能就是用来展示静态页面的一个小用途

Gitee 部署vue-cli3项目

 

目录 [隐藏]

通过前面两点的简单介绍,我们就开始实际操作吧!

                                        Gitee 部署vue-cli3项目

首先我们在自己的线上仓库新建一个分支

线上创建完分支以后,本地代码如何同步线上分支呢?

①:Gitee 部署vue-cli3项目

②:Gitee 部署vue-cli3项目

(这样本地代码就和线上代码同步啦)

现在我们试试使用npm run build来打包本地的代码吧

注意:在打包的过程中,是默认不把忽略dist文件的,这样我们的线上代码就不能够获取到最新的dist文件夹。我们只需要将.gitignore里的/dist注释掉就好了。

Gitee 部署vue-cli3项目

现在可以点击上传代码与线上仓库同步,这个时候我们就可以在线上仓库上看到dist文件夹了

Gitee 部署vue-cli3项目

重头戏来咯

Gitee 部署vue-cli3项目

1.我们选中代码分支,将部署目录改为dist,这样我们就能确保域名访问的时候可以直接指向当前文件夹里的index.html文件。

2.此时点击更新按钮,等待gitee自动部署,部署完成以后会出现一个可以访问的域名

Gitee 部署vue-cli3项目

3.当你访问这个域名的时候,可能会是一个空白页,打开控制台会发现报错了。通过控制台的报错,我们可以知道是静态资源无法被访问到。

Gitee 部署vue-cli3项目

 

                                   Gitee 部署vue-cli3项目

静态资源无法访问的问题出在哪里呢,通过检查vue.config.js文件,我们可以发现,在部署生产环境时,要将域名修改为你当前线上仓库的名字,你只需要将图片处的blog替换为你的线上仓库的名字即可。

Gitee 部署vue-cli3项目

 

最后,重新执行一遍npm run build,将代码同步的线上去,再打开gitee pages页面更新一下代码部署就ok啦~

接下来就可以愉快的向你的小伙伴展示自己做的静态页面啦~