仿微信实战项目（一）部署 Gitee Pages 踩坑记录

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第3天，点击查看活动详情

Wochat，顾名思义，山寨版 WeChat（微信PC端）

项目基础：Vue3-ts-pinia-vite-webrtc

代码已经上传到了 Gitee，并将静态页面部署到了 Gitee Pages

登录界面：bigflowerfat.gitee.io/wochat-vue3…
聊天界面：bigflowerfat.gitee.io/wochat-vue3…

最终实现的功能

仿微信PC端的 WeChat 的 UI 界面
基于 Websocket 的文字消息收发
基于 WebRTC 的音视频通信

部署到 Gitee Pages

言归正传，如何部署 Vue 项目到 Gitee Pages ？网上也是有很多教程，但生活总是给你意想不到的惊喜。

所以下面就把 Vite + Vue3 项目的部署心路历程分享给大家

1. 找不到 index.js 文件

这是个常见错误了，很多文章都有提到。需要将打包的 base 参数设置为项目名称（Gitee中仓库的名称），在 vite.config.ts 中如下配置

export default defineConfig({
  ...
  base: "/wochat-vue3-ts-pinia/",
});

注意这里是仓库的名称，不是你的 Gitee用户名。

如此配置后，当我们运行 npm run dev 后，访问地址由原来的 http://127.0.0.1:8080/ 变成了 http://127.0.0.1:8080/wochat-vue3-ts-pinia/

如果你同我一样有强迫症，希望本地调试的时候，还是之前的地址，可以使用 process.env.NODE_ENV 进行判断

export default defineConfig({
  ...
  base: process.env.NODE_ENV === "production" ? "/wochat-vue3-ts-pinia/" : "/",
});

2. 部署后只能显示主页面，无法路由到其他页面，

我的项目中，除了主页，还希望展示登录页面。但部署后发现登录页面无法访问。

这里涉及到常见的路由方式了，因为 Gitee Pages 上部署的是静态文件，并不存在后台服务。所以这里如果想要访问其他页面，需要将路由方式设置为 hash。具体代码如下

const historyMode = process.env.NODE_ENV === "production" ? createWebHashHistory() : createWebHistory();
const router = createRouter({
  history: historyMode,
  routes
});

同样，通过判断，只有打包的时候，使用 hash 的路由方式

3. 图片没有正常打包

查看 dist 路径发现，项目中引用的图片并没有打包到 dist 路径下。这里需要在 vite.config.ts 指定静态资源路径

export default defineConfig({
  ...
  publicDir: "src/public",
});

4. 图片没有正常加载

通过 F12 调试发现，请求图片地址的路径，比实际的多了一部分。这里就涉及到静态资源的引用问题了

除了网上提到最多的，图片引用去掉前面的 /，还有一些要注意的：

使用 import 引入本地图片

将相对路径的引用修改为 import 的路由方式

<img src="../assets/pradypod.png" />


<!--import IconPradypod from '@/public/pradypod.png'-->
<img :src="IconPradypod" />

pinia 的 store 中，图片引用方式去掉冗余的部分

state: () => ({
  avatorUrl: 'src/public/avator/avator.jpg',
})

// 修改为：
state: () => ({
  avatorUrl: 'avator/avator.jpg',
})

后记

源码已经上传到了 Gitee，目前项目只完成了基础 UI 部分。后续会补充消息发送、音视频聊天等功能，敬请期待。

仿微信实战项目 （一）部署 Gitee Pages 踩坑记录