Vite迁移Vue SPA后路由失效：MIME类型错误如何解决？

问题详情 #

将Vue单页应用从Vue CLI迁移到Vite后，多数功能正常，但后端生成的mywebsite.org/expPerma/:id格式路由出现异常：用户访问时页面空白，控制台报错：

Loading module from “https://mywebsite.org/expPerma/assets/index-Dq7hsn19.js” was blocked because of a disallowed MIME type (“text/html”).

仅生产环境存在该问题，开发服务器中链接可正常工作。已尝试查阅文档、搜索GitHub issue，配置多页面应用均未解决。当前vite.config.js配置如下：

export default defineConfig({
  plugins: [
    typescript(),
    vue()
  ],
  base: "./",
  define: {
    global: 'globalThis'
  },
  publicDir: STATIC_DIR,
  resolve: {
    alias: {
      '@': path.resolve(pathSegments, './src'),
    },
    extensions: ['.js', '.ts', '.json', '.vue'],
  },
  css: {
    preprocessorOptions: {
      scss: { additionalData: `@import "./src/assets/scss/_mixins.scss";` },
    },
  },
  build: {
    assetsInlineLimit: 0,
  },
  test: {
  },
})

解决步骤 #

• 调整Vite的base配置：将base: "./"修改为base: "/"。相对路径的base会导致子路由下的资源请求路径错误（比如/expPerma/assets/...），改为根路径后，资源会从/assets/...加载，匹配实际构建后的资源位置。
• 配置后端SPA fallback规则：生产环境中，所有路由请求必须指向index.html，让vue-router接管前端路由处理。以Nginx为例，需添加如下配置：

location / {
  try_files $uri $uri/ /index.html;
}

• 验证构建后的资源路径：构建完成后检查dist/index.html中的资源引用，确认是绝对路径（如/assets/index-Dq7hsn19.js）而非相对路径。

内容的提问来源于stack exchange，提问作者Charles M.