Vite 构建的 Vue3 项目打包部署到 Gitee —— 全网最详细系列
最近利用 Vite 构建 Vue3 写了一个简单的 ToDoList,想要部署到 Gitee,并开启 Gitee Pages 服务时出现页面空白的问题,参考了很多博客,尝试了很多办法都没有解决,正愁眉不展时我点开了Vite的官方文档,好家伙,直接茅塞顿开,原本这么小的一个问题被我想的太复杂了,还浪费了那么多时间,哎,此刻记录下我的解决办法,希望能帮到跟我有同样问题的人。
Vite部署静态站点官方文档
一、本地打包测试
构建应用(打包)
默认情况下,构建会输出到 dist 文件夹中。
本地测试应用
当你构建完成应用后,你可以通过运行 npm run preview
命令,在本地测试该应用,利用好控制台,找 BUG 修 BUG。
每次修改代码后要先
build
构建打包再preview
本地测试才能显示出修改代码后最新的效果
vite preview 命令会在本地启动一个静态 Web 服务器,将 dist 文件夹运行在 http://localhost:5000。这样在本地环境下查看该构建产物是否正常可用就方便了。
==这一点非常重要,可以在本地测试应用,当本地测试没问题后再推到仓库开启 Gitee Pages 服务即可,不需要频繁推到仓库更新 Gitee Pages 测试了==
我遇到的问题
我在本地测试的时候还是显示页面空白,打开控制台发现报了:
TypeError: Cannot read properties of undefined (reading '$store')
回到代码发现是我在使用 Vuex 的数据时按照往常习惯在前面加了this
,我把this
去掉重新npm run build
打包,再打开npm run preview
本地测试,错误就没了,页面也正常显示了。
修改前:
修改后:
二、配置 Gitee Pages
在 vite.config.js 中设置正确的 base。
如果你要部署在
https://<USERNAME>.gitee.io/
上你可以省略 base 使其默认为'/'
即:base:'/'
。
如果你要部署在
https://<USERNAME>.gitee.io/<REPO>/
上例如你的仓库地址为https://gitee.com/<USERNAME>/<REPO>
那么请设置 base 为'/<REPO>/'
即:base:'/<REPO>/'
。
例如:我的仓库地址为:https://gitee.com/ailjx/todolist,我生成的 Gitee Pages 为: http://ailjx.gitee.io/todolist则我需要如下配置:
==注意:base 里前后各有一个/
,省略一个都不行!==
修改路由
设置完 base 后,项目的地址后面就会自动加上 base 里配置的内容,所以要修改下路由。
例如:
我的项目==首页==原路由为:
修改后的路由:
三、Gitee 部署
修改.gitignore
文件
如果打包后直接 push 到 Gitee 仓库会发现仓库里没有dist
打包文件夹这时需要将项目里的.gitignore
文件里的 dist 删除或者注释掉如:
.gitignore
文件可以理解为管理 Git 内容的一个文件,具体可见vue项目打包后提交到git上为什么没有dist这个文件?
修改 README.md 文件(推荐)
README.md 文件里的内容即是对项目的一个介绍内容,推到 Gitee 仓库后会在仓库底部显示,为了让人们了解你的项目,并让自己养成良好的习惯,推荐自行修改下 README.md 文件。
开启 Gitee Pages 服务
推荐将部署目录改为 dist,而不是部署整个仓库!
最后附上我的仓库地址:https://gitee.com/ailjx/todolist,期待你的 Star
如果这篇文章帮到了你还请给个点赞、评论、收藏,一键三连!
版权声明: 本文为 InfoQ 作者【海底烧烤店ai】的原创文章。
原文链接:【http://xie.infoq.cn/article/320d5753a9c17f9b4dd010684】。文章转载请联系作者。
评论