Vite配置外部依赖后相对路径异常问题求助

问题根源 #

Rollup的external配置仅标记模块为外部依赖，但默认会提取模块的文件名作为最终引入路径，不会保留完整的目录前缀，导致你期望的Basis_24.2.0.0/js/部分被截断。

修复步骤 #

1. 配置Rollup路径映射 #

修改Vite配置中的rollupOptions.output.paths，为外部依赖指定完整的输出路径，确保打包后生成正确的相对路径：

base: './',
plugins: [react()],
build: {
  rollupOptions: {
    external: ['Basis_24.2.0.0/js/WZP-React-24.2.0.0.js'],
    output: {
      paths: {
        'Basis_24.2.0.0/js/WZP-React-24.2.0.0.js': './Basis_24.2.0.0/js/WZP-React-24.2.0.0.js'
      },
      format: 'es'
    }
  },
  // 移除自动添加的crossorigin属性（按需选择）
  crossorigin: false
}

2. 恢复defer属性（可选） #

如果打包后script标签丢失了defer属性，可以添加一个自定义Vite插件手动补全：

plugins: [
  react(),
  {
    name: 'inject-defer',
    transformIndexHtml(html) {
      return html.replace(
        /<script type="module" src="\.\/Basis_24\.2\.0\.0\/js\/WZP-React-24\.2\.0\.0\.js">/g,
        '<script defer type="module" src="./Basis_24.2.0.0/js/WZP-React-24.2.0.0.js">'
      )
    }
  }
]

原理说明 #

• output.paths用于将外部模块的标识映射到打包后实际引入的路径，直接指定你需要的相对路径即可保留完整前缀。
• crossorigin: false会关闭Vite自动添加的跨域属性，如果你需要该属性可删除此配置。
• 自定义插件通过transformIndexHtml钩子修改最终生成的index.html内容，补全defer属性。

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