Github部署vue3项目没有显示页面

Question

有部署过vite的vue3项目到githubpage上过嘛 想请教下 部署了怎么页面没东西 网络中404响应这样 不晓得啥问题 配置了hash路由，base路径与仓库名称一致

Answer 1

让 “紫雾凌寒” 来帮你回答,本回答结合 DeepSeek

如果还有问题，请评论或点击头像私信，如果有帮助到您, 请关注、采纳、点赞

1. 关键点分析：
   - 项目部署到GitHub Pages后页面显示空白且网络响应404。
   - 已配置hash路由，base路径与仓库名称一致，但仍出现问题。
2. 解决方案：
   - 首先检查项目构建后的文件路径。在Vite项目中，构建后的文件默认在dist目录下。
   - 确认GitHub Pages的部署设置。仓库的Settings -> Pages中，Source应设置为gh-pages分支（如果之前没有创建该分支，Vite构建后可以使用npx gh-pages -d dist命令创建并部署到该分支），Build and deployment中的Build directory应设置为dist。
   - 检查index.html文件中的base路径配置。如果是通过Vite创建的项目，在vite.config.js中设置了base路径，例如：

export default {
  base: '/your-repo-name/',
};

那么index.html中引用资源的路径应该是相对这个base路径的。确保没有硬编码绝对路径。
- 检查路由配置。虽然配置了hash路由，但可能存在路由匹配不正确的情况。例如，在router/index.js中：

import { createRouter, createWebHashHistory } from 'vue-router';

const routes = [
  {
    path: '/',
    name: 'home',
    component: () => import('@/views/Home.vue')
  }
];

const router = createRouter({
  history: createWebHashHistory(),
  routes
});

export default router;

确保@/views/Home.vue文件存在且路径正确，并且组件内部的模板和样式等资源引用也是正确的。
3. 方案优缺点：
- 上述方案全面地从项目构建、部署设置、路径配置和路由配置等多个方面进行检查和调整，能够较为全面地解决可能出现的问题。优点是考虑了项目部署过程中的多个关键环节，缺点是步骤相对较多，需要逐一排查，可能比较耗时。
4. 总结：
出现GitHub Pages部署Vue3项目页面空白且404的问题，需要从项目构建后的文件路径、GitHub Pages部署设置、index.html的base路径配置以及路由配置等方面进行排查和调整，确保各个环节的配置正确，才能解决页面显示问题。

希望以上解答对您有所帮助。如果您有任何疑问，欢迎在评论区提出。