Vite/Vue部署GitHub Pages遇模块解析及路由等错误求助

我用Vite+Vue开发的SPA通过GitHub Actions部署到GitHub Pages后，本地运行完全正常，但部署后的页面报错：Uncaught TypeError: Failed to resolve module specifier "vue". Relative references must start with either "/", "./", or "../"。

页面地址：https://pauladanthu.github.io/my-visit-card/

相关代码 #

index.html #

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" type="text/html" href="style.css">
    <title>Paula Danthu Frontend Dev</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="./src/main.js"></script>
  </body>
</html>

router/index.js #

import { createRouter, createWebHistory } from 'vue-router'
import HomePage from '../views/HomePage.vue'

const routes = [
    {path: '/my-visit-card/', name: 'HomePage', component: HomePage}
]

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

export default router

vite.config.js #

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
const path = require('path')

export default defineConfig({
  alias:{
    '@' : path.resolve(__dirname, '.src')
  },
  base: '/my-visit-card/',
  plugins: [vue()]
})

已尝试的解决方法 #

我曾在index.html中添加importmap配置：

<script type="importmap">
      { "imports": 
        { "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js" } 
      }
</script>

初始错误消失，但出现新的报错：

• Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/css". Strict MIME type checking is enforced for module scripts per HTML spec.
• Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "application/octet-stream". Strict MIME type checking is enforced for module scripts per HTML spec.
• GET https://pauladanthu.github.io/my-visit-card/src/router/ net::ERR_ABORTED 404

解决方案 #

1. 修复Vite路径别名配置错误 #

vite.config.js中别名路径写错，且新版Vite要求别名放在resolve字段下，修改为：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'

export default defineConfig({
  resolve: {
    alias:{
      '@' : path.resolve(__dirname, './src')
    }
  },
  base: '/my-visit-card/',
  plugins: [vue()]
})

2. 修正路由base路径 #

createWebHistory需要传入GitHub Pages仓库名作为base参数，同时路由path不需要带仓库前缀：

import { createRouter, createWebHistory } from 'vue-router'
import HomePage from '../views/HomePage.vue'

const routes = [
    {path: '/', name: 'HomePage', component: HomePage}
]

const router = createRouter({
    history: createWebHistory('/my-visit-card/'),
    routes
})

export default router

3. 移除手动添加的importmap #

Vite打包会自动处理依赖模块引入，手动添加的importmap会导致加载冲突，删掉index.html中的该代码块。

4. 修复index.html资源路径错误 #

• 图标路径改为带base前缀的形式：

<link rel="icon" type="image/svg+xml" href="%VITE_BASE_URL%vite.svg" />

• 样式表的type属性写错，修正为：

<link rel="stylesheet" type="text/css" href="style.css">

5. 确保GitHub Actions部署流程正确 #

检查Actions配置，确保执行npm run build并将dist目录部署到Pages，示例配置：

name: Deploy to GitHub Pages
on:
  push:
    branches: [ main ]
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - name: Install dependencies
        run: npm install
      - name: Build
        run: npm run build
      - name: Deploy
        uses: peaceiris/actions-gh-pages@v4
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./dist

内容的提问来源于stack exchange，提问作者Paula Danthu