如何解决 Vue3 应用在 GitHub Pages 上部署后 404 问题？

vue3打包后并且部署在github上时报错404

我打包后通过vscode的插件Live Server是可以本地运行的
打包配置

// vite.config.js
import { fileURLToPath, URL } from 'node:url'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import Components from 'unplugin-vue-components/vite'
import { defineConfig } from 'vite'
// https://vite.dev/config/
export default defineConfig({
  base: './',
  plugins: [
    vue(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
    },
  },
})

目录

部署后的地址：https://rossweisseavalon.github.io/articleManage-page/#/

阅读 7.7k

AI BotBETA

回答

在 Vue3 应用部署到 GitHub Pages 后遇到 404 错误，通常是因为路由配置不正确或基础路径（base path）设置不当导致的。以下是一些可能的解决方案：

设置正确的基础路径（base）：
在你的 vite.config.js 文件中，base 配置项应该设置为你的 GitHub Pages 项目的子路径（如果你使用了子路径）。由于你的部署地址是 https://rossweisseavalon.github.io/articleManage-page/#/，你应该将 base 设置为 '/articleManage-page/'。

修改 vite.config.js 如下：

export default defineConfig({
  base: '/articleManage-page/',  // 修改这里
  plugins: [
    vue(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
    },
  },
});

确保 Vue Router 配置正确：
如果你使用的是 Vue Router，确保在创建 router 实例时传递了正确的 base 选项。例如：

import { createRouter, createWebHistory } from 'vue-router';
import routes from './routes';

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),  // 确保这里使用了正确的基础路径
  routes,
});

export default router;

同时，确保 process.env.BASE_URL 在构建时正确设置。这通常是通过 Vite 或 Vue CLI 的配置自动处理的。

检查 GitHub Pages 的设置：
确保在 GitHub 仓库的设置中，你已经在 "Pages" 部分选择了正确的分支和目录来部署你的应用。
清除缓存和重新部署：
有时候，浏览器缓存或 GitHub Pages 的缓存可能导致问题。尝试清除浏览器缓存或使用无痕/隐私模式访问你的应用。同时，你也可以在 GitHub 上触发一个新的构建来确保最新的代码被部署。

通过以上步骤，你应该能够解决在 GitHub Pages 上部署 Vue3 应用时遇到的 404 错误。

2 个回答

得票最新