VueJS 3+Vite应用部署EC2后Firefox页面加载异常求助

问题背景 #

基于VueJS 3、Pinia状态管理和Primevue组件库的应用部署在EC2关联的S3存储桶中，近期出现仅Firefox浏览器无法加载部分页面的问题，Chrome可正常访问，异常页面地址：https://dev.hyperwaterbids.com/bidboard/

报错信息 #

• 错误1：

GET https://dev.hyperwaterbids.com/node_modules/.vite/deps/chunk-QMOCFC7W.js?v=4e15f6ce
NS_ERROR_CORRUPTED_CONTENT

• 错误2：

Loading module from “https://dev.hyperwaterbids.com/node_modules/.vite/deps/chunk-NUM5SG7I.js?v=4e15f6ce” was blocked because of a disallowed MIME type (“”)

• 错误3：

TypeError: error loading dynamically imported module: https://dev.hyperwaterbids.com/src/pages/bidboard/index.vue

当前Vite配置（vite.config.ts） #

import { fileURLToPath, URL } from 'node:url'
import VueRouter from 'unplugin-vue-router/vite'

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

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    VueRouter({}),
    vue(),
  ],
  server: {
    watch: {
      usePolling: true
    },
    port: 8082,
    host: '0.0.0.0',
    hmr: {
      overlay: false
    }
  },
  optimizeDeps: {
    exclude: ['primevue', '@primevue/core/api', 'axios']
  },
  base: "./",
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

解决方案 #

1. 修正S3存储桶的Content-Type配置 #

Firefox对JS模块的MIME类型检查比Chrome严格，若S3未正确设置文件的Content-Type会触发拦截：

• 确保.js、.vue编译产物的Content-Type为application/javascript
• 确保.css文件的Content-Type为text/css
• 可通过S3控制台批量修改现有文件的Content-Type，或在部署脚本中添加自动设置逻辑（如AWS CLI的--content-type参数）

2. 强制清除Firefox缓存 #

• 按Ctrl+Shift+R（Windows/Linux）或Cmd+Shift+R（Mac）强制刷新页面，绕过缓存加载最新资源
• 或进入Firefox设置→隐私与安全→清除数据→勾选缓存后清除

3. 调整Vite配置优化兼容性 #

• 修改base配置为绝对路径，避免相对路径导致资源加载错误：

  base: "/",
  

• 移除optimizeDeps.exclude中的PrimeVue相关依赖，让Vite预优化这些依赖，提升浏览器兼容性：

  optimizeDeps: {
    exclude: ['axios']
  },
  

4. 检查缓存策略（若使用CDN） #

• 若站点配置了CDN（如CloudFront），确认缓存过期时间设置合理，不会长期缓存旧资源
• 确保CDN正确转发S3返回的Content-Type响应头

5. 重新打包部署 #

• 执行npm run build重新打包，确认打包过程无报错
• 清空S3存储桶内旧资源，上传全新打包产物，避免新旧资源混合导致加载异常

内容的提问来源于stack exchange，提问作者Dylan Cross