HBuilder 真机运行模块脚本加载失败解决方案

HBuilder 真机运行模块脚本加载失败问题

该 MIME 类型错误是 HBuilder 真机运行的典型问题，表现为服务器响应 MIME 类型为空，导致模块脚本加载失败。

1. 修改 Vite 配置

在 vite.config.js 中将 base 设置为相对路径，并确保资源路径正确。

export default {
  base: "./", // HBuilder 真机必须用相对路径
  builder: {
    assetsInlineLimit: 4096, // 小于 4kb 的资源内联为 base64
    rollupOptions: {
      output: {
        // 手动分包，避免单文件过大
        manualChunks: {
          'vue-vendor': ['vue', 'vue-router', 'pinia'],
          'vuetify': ['vuetify'],
          'echarts': ['echarts']
        },
        chunkFileNames: 'assets/js/[name]-[hash].js',
        entryFileNames: 'assets/js/[name]-[hash].js',
        assetFileNames: 'assets/[ext]/[name]-[hash].[ext]'
      }
    }
  }
}

2. 修改路由配置

在 router/index.js 中使用 Hash 模式，以兼容真机运行。

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

const router = createRouter({
  // 使用 hash 模式，兼容 HBuilder 真机运行
  history: createWebHashHistory(),
  routes,
  /**
   * scrollBehavior：路由切换时控制页面滚动位置
   * 如果有 savedPosition（浏览器前进/后退时），保持原位置；否则默认滚动到页面顶部。
   */
  scrollBehavior(to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition;
    } else {
      return { top: 0 };
    }
  }
});