Vue3+TypeScript动态导入模块首次用相对路径触发404问题

我用TypeScript构建Vue3应用，通过import()根据语言代码参数动态加载模块。明明只调用了一次模块加载，但浏览器会对每个待加载文件发起两次请求：第一次用相对URL chunks/file.js（返回404），第二次用绝对URL /app/chunks/file.js加载成功。应用能正常运行，但想避免第一次错误的URL请求。

补充信息 #

源码（/src/languages/languagefeatures.ts） #

private featureTypes: any = {
    es: () => import('./es/LanguageFeaturesEs'),
    ja: () => 
        {
           console.log("import is being invoked: ./ja/LanguageFeaturesJa");
           return import('./ja/LanguageFeaturesJa');        
        }
}

编译后代码 #

constructor() {
    R(this, "featureTypes", {
        es: ()=>ks(()=>import("./LanguageFeaturesEs.js"), []),
        ja: ()=>(console.log("import is being invoked: ./ja/LanguageFeaturesJa"),
        ks(()=>import("./LanguageFeaturesJa.js"), ["chunks/LanguageFeaturesJa.js", "chunks/GlyphPitch.js"]))
    });
    R(this, "loadedFeatureTypes", {})
}

解决方案 #

1. 修正打包工具的公共路径配置 #

这种重复请求大概率是公共路径（publicPath）配置不匹配导致的，打包工具生成了错误的相对路径，浏览器 fallback 到绝对路径才加载成功。

• 如果你用Vite：在vite.config.ts里设置base为应用部署的绝对路径，比如你的应用部署在/app/下：

  export default defineConfig({
    base: '/app/'
  })
  

• 如果你用Webpack：在webpack.config.js里配置output.publicPath：

  module.exports = {
    output: {
      publicPath: '/app/'
    }
  }
  

配置正确后，打包工具会直接生成正确的绝对URL，不会再出现错误的相对路径请求。

2. 检查动态import路径的规范性 #

确保动态import的路径是相对于当前模块的正确相对路径，避免使用动态拼接的复杂路径（比如模板字符串拼接路径时要确保打包工具能正确解析）。从你的源码看，路径写法是正确的，主要还是公共路径的问题。

3. 排查重复触发逻辑 #

虽然你说只调用了一次加载，但可以检查：

• 是否有其他组件或逻辑重复调用了同一个动态加载方法
• 是否存在组件重复渲染（比如未正确使用v-if或keep-alive）导致的重复触发
  如果是重复触发导致的两次请求，需要优化逻辑确保只调用一次。

4. 调整打包工具的分包/预加载配置 #

如果是打包工具的自动分包或预加载逻辑导致的额外请求，可以尝试调整配置：

• Vite中可以在rollupOptions里自定义手动分包规则，避免自动生成的chunk路径出错：

  export default defineConfig({
    build: {
      rollupOptions: {
        output: {
          // 自定义分包规则，或者禁用自动分包
          manualChunks: (id) => {
            if (id.includes('languages')) return 'language-chunks';
          }
        }
      }
    }
  })
  

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