这是我参与「第四届青训营 」笔记创作活动的第6天

接着前面两篇青训营笔记的内容，本次大项目开发选择了vite作为前端构建工具，在整体项目完成度到达80%左右时，前端项目基本完成的情况下，开始考虑如何将项目打包并且发布到静态站点。关于后端部署在本次项目中没有涉及。下面就聊一聊这次项目的部署。

部署网站方式选择

在实际打包前，对不同的部署方式进行了查找和对比。主要来说一种是利用云服务器，包括阿里云，腾讯云等。这种方式的问题在于如果只是部署前端，需要配置相关文件包括使用宝塔面板工具等相对比较复杂。 另外一种使用代码托管平台提供的静态站点部署方法，提供这类服务的包括github、gitlab、Netlify等。这种方式相对前一种方式来说要简单一些，也不需要租用云服务器，但是缺点是，域名相对固定无法自定义修改。

本项目在考虑到以前端为主，且开发过程中代码托管在Github上，因此使用第二种方式部署到GitHub Pages。关于GitHub Pages的简单介绍和使用方法可以参考MDN文档developer.mozilla.org/zh-CN/docs/… 和 GitHub Page的官方文档docs.github.com/cn/pages/qu… 。

下面聊一聊在部署本项目时遇到的一些问题。

vite项目中的设置

一开始将文件打包完成后按照上面的文档进行了部署，但是出现了一些问题，打开网页地址后显示空白页面。查找相关问题后发现有两处代码需要修改才能成功。

路由的相关配置

第一个路由配置需要修改，相关代码如下：

const router = createRouter({
//这里的history属性值需要传入参数/<REPO>/,即项目的部署名
  history: createWebHashHistory('/juejinweb/'),
  routes,
});

vite配置文件的修改

第二处是在vite.config.ts配置文件中增加，base选项，代码如下

……,
//这里的属性值仍然要修改为项目部署名
 base:"/juejinweb/",
……,

修改完这两处代码后，再次打包上传，页面就显示出来了。

总结

使用vite工具打包过程中其实也出现了一些bug，但是因为没有记录所以没有在文章中提及。然后在将打包后的文件部署到Github上的过程中，出现了一些问题。但是通过查阅相关文档也逐步的解决了。其中vite官方文档也对相应的过程给出了详细步骤，参考链接：cn.vitejs.dev/guide/stati… 。