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(浏览器前进/后退时),保持原位置;否则默认滚动到页面顶部。
*/
() {
(savedPosition) {
savedPosition;
} {
{ : };
}
}
});

