Vite + Vue3 适配webOS(>=6.0)：现代/兼容代码分发配置、Web Worker支持及MIME错误解决问询

我来梳理下你遇到的这些问题，结合webOS的实际特性和Vite的配置细节，给你一些落地的建议：

一、先搞定眼前的MIME类型加载错误 #

你遇到的「模块脚本MIME类型为空」的报错，大概率是webOS系统的静态文件服务对ES模块脚本的MIME类型映射出了问题，而非代码本身的兼容性问题：

• webOS的应用是通过系统自带的容器运行的，静态文件的服务由webOS内核处理，它可能没有正确给标记为type="module"的.js文件返回application/javascript的MIME类型，违反了HTML规范对模块脚本的要求。
• 你可以先做个快速排查：把Vite配置里的renderModernChunks改成false，只打包Legacy代码，如果报错消失，就实锤是现代模块的MIME处理问题。
• 另外检查你的base: "./"配置，虽然看起来没问题，但可以尝试把打包后的文件结构尽量简化，比如不要嵌套过深的目录，避免webOS的文件服务路径解析异常。

二、webOS对ES Modules和Web Worker的原生支持情况 #

先给你吃个定心丸：webOS 6.0+的内核完全支持这两个特性，不需要一刀切只发Legacy代码：

• webOS 6.0基于Chromium 84，webOS 22基于Chromium 95，这两个版本都原生支持ES Modules和标准Web Worker。
• 你用的@/worker/data?worker导入语法，Vite会自动处理成符合规范的Worker加载逻辑，但如果遇到加载问题，可以试试内联Worker的写法，绕开单独文件的MIME问题：

// 替换原来的Worker导入
import DataWorker from "@/worker/data?worker&inline";

这种方式会把Worker代码打包成Blob内联到主代码里，不需要单独加载外部文件，能规避webOS的静态文件服务限制。

三、是否需要仅提供Legacy代码？ #

完全没必要，现代代码在TV设备上的性能优势很明显，尤其是资源有限的智能电视。除非你测试发现某些低端机型的webOS 6.0内核版本低于官方标称的Chromium 84，那再考虑兜底用Legacy代码。

四、可靠的webOS设备检测与代码分发方案 #

如果你想精准控制给webOS设备分发的代码，有两种实用的思路：

1. 利用Vite Legacy插件的自动降级逻辑（推荐） #

调整Legacy插件的targets，精准匹配webOS的内核版本，让插件自动生成兼容的现代/Legacy代码和对应的加载逻辑：

legacy({
  // 覆盖webOS 6.0+的所有内核版本
  targets: ["Chrome >= 84"],
  renderModernChunks: true,
  renderLegacyChunks: true,
  // 按需开启polyfill，webOS内核已经支持大部分特性，不需要全量polyfill
  modernPolyfills: ['es.global-this'],
}),

Vite会自动在打包后的HTML中生成带type="module"的现代脚本和带nomodule的Legacy脚本，浏览器会自动选择加载对应的版本。如果webOS对nomodule的解析有问题，可以手动修改打包后的HTML，通过User-Agent判断加载：

<script>
  // 检测webOS设备的User-Agent
  const isWebOS = navigator.userAgent.includes('Web0S') || navigator.userAgent.includes('webOS');
  const script = document.createElement('script');
  if (isWebOS) {
    // 给webOS加载Legacy代码
    script.src = './js/legacy-index.js';
  } else {
    // 给其他现代浏览器加载模块代码
    script.type = 'module';
    script.src = './js/index.js';
  }
  document.body.appendChild(script);
</script>

2. 分环境打包 #

可以在Vite中配置两个打包命令，分别生成现代版和Legacy版代码，然后通过webOS的应用分发逻辑（或者自己的服务端）根据设备UA分发对应的包。不过这种方式会增加维护成本，适合对性能要求极高的场景。

五、你的Vite配置优化建议 #

针对你的现有配置，做几个小调整：

import { defineConfig } from "vite";
import { fileURLToPath, URL } from "node:url";
import vue from "@vitejs/plugin-vue";
import legacy from "@vitejs/plugin-legacy";
import del from "rollup-plugin-delete";

export default defineConfig({
  base: "./",
  plugins: [
    vue(),
    legacy({
      // 精准匹配webOS 6.0+的内核
      targets: ["Chrome >= 84"],
      renderModernChunks: true,
      renderLegacyChunks: true,
      // 只添加webOS缺失的polyfill，减少体积
      modernPolyfills: ['es.global-this'],
    }),
  ],
  server: {
    host: true,
    port: 8080,
  },
  resolve: {
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url)),
    },
  },
  build: {
    minify: "terser",
    assetsInlineLimit: 0,
    outDir: "dist",
    emptyOutDir: false,
    rollupOptions: {
      output: {
        entryFileNames: "js/[name].js",
        chunkFileNames: "js/[name]-[hash].js",
        assetFileNames: (assetInfo) => {
          if (assetInfo.name?.endsWith(".css")) {
            return "css/[name]-[hash][extname]";
          }
          return "assets/[name]-[hash][extname]";
        },
      },
      plugins: [
        del({
          targets: ["dist/assets/*", "dist/css/*", "dist/js/*"],
          runOnce: true,
          verbose: true,
          hook: "buildStart",
        }),
      ],
    },
  },
});

• 把targets改成Chrome >=84，精准覆盖webOS 6.0+的内核；
• 调整modernPolyfills只添加必要的polyfill，避免冗余代码；
• 对于Web Worker，优先用?worker&inline的内联方式，规避文件加载的MIME问题。

内容来源于stack exchange