Gitee 部署vue-cli3项目

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

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

 

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

 

目录 [隐藏]

• 通过前面两点的简单介绍，我们就开始实际操作吧！
• 首先我们在自己的线上仓库新建一个分支
• 现在我们试试使用npm run build来打包本地的代码吧
• 重头戏来咯
• 最后，重新执行一遍npm run build，将代码同步的线上去，再打开gitee pages页面更新一下代码部署就ok啦~
• 接下来就可以愉快的向你的小伙伴展示自己做的静态页面啦~

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

                                        

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

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

①：

②：

（这样本地代码就和线上代码同步啦）

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

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

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

重头戏来咯

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

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

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

 

                                   

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

 

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

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