uni-app 包含条件编译的页面开启ts后sourcemap生成失败

uni-app 包含条件编译的页面开启ts后sourcemap生成失败

测试过的手机：

本地HBuilderx打包失败，和设备无关

示例代码：

<script lang="ts">  
 // #ifdef H5  
console.log('Index')  
// #endif  
export default {  
    data() {  
         return {  
             title: 'Hello'  
          }  
    },  
    onLoad() {},  
    methods: {  
    }  
}  
</script>

操作步骤：

  1. 创建一个新的uni-app项目
  2. 页面脚本添加ts支持 <script lang="ts">
  3. 脚本或者模板中添加条件编译
  4. 本地打包/云打包时开启sourcemap， 或者vite.config.js中增加 build: {sourcemap: true}

预期结果：

正常打包生成sourcemap

实际结果：

生成失败，报错信息"Multiple conflicting contents for sourcemap source xxx/xxx/uniapp-demo/pages/index/index.vue"

bug描述：

项目只要开启sourcemap就一直打包失败，最近定位了下原因发现是页面开启了ts同时有条件编译导致生成失败，可能的原因是打包时loader移除条件编译符前后有两次注入，而文件名相同脚本内容不一样就会有冲突，提示"Multiple conflicting contents for sourcemap source …".

文件类型 有条件编译 生成 sourcemap 是否冲突
.ts 文件 ✅ ✅ ✅ 没问题
.vue <script> ✅ ✅ ✅ 没问题
.vue <script lang="ts"> ❌ ✅ ✅ 没问题
.vue <script lang="ts"> ✅ ✅ ❌ 有问题

更多关于uni-app 包含条件编译的页面开启ts后sourcemap生成失败的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

该bug反馈内容完整且专业，问题描述清晰：明确指出Vue3项目中.vue文件同时启用TypeScript和条件编译时开启sourcemap会导致打包失败，错误提示"Multiple conflicting contents for sourcemap source"。提供了可验证的对比表格、直接可用的代码示例及详细复现步骤，分类信息包含HBuilderX 4.87版本、Mac环境等关键细节，官方人员可据此精准复现问题。
根据知识库分析，bug成立。依据包括：

知识库确认uni-app支持条件编译和TypeScript（“uni-app的vue3模式：vue文件及nvue文件均支持最新版ts”）
明确说明编译器处理流程（“编译器支持条件编译…将.vue文件编译为js代码”）
sourcemap生成机制文档（“在HBuiderX中生成sourceMap文件”）未提及此组合限制
错误本质是编译流程中条件编译处理与TypeScript编译对sourcemap的映射冲突，符合Vite编译原理

非概念性问题：用户正确使用lang="ts"和条件编译语法（// #ifdef H5），操作符合TypeScript支持文档规范。问题源于编译链中两次内容转换导致sourcemap源文件冲突，属真实兼容性缺陷。
建议解决方案：

升级HBuilderX至最新版（当前反馈4.87可能存在已修复版本）
尝试在tsconfig.json中调整sourceMap配置
若持续存在，需官方修复编译流程中条件编译与TypeScript的sourcemap映射逻辑，参考编译器文档排查Vite插件冲突 内容为 AI 生成，仅供参考

更多关于uni-app 包含条件编译的页面开启ts后sourcemap生成失败的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个已知的问题，当在 Vue 文件的 <script lang="ts"> 中使用条件编译并开启 sourcemap 时，会导致生成 sourcemap 冲突。
临时解决方案： 避免在 Vue 的 ts 脚本中使用条件编译，可将条件编译逻辑移到纯 .ts 文件中 关闭 sourcemap 生成（生产环境建议关闭）
官方已在处理此问题，建议关注 uni-app 官方文档 获取最新修复版本。
这个问题是由于条件编译处理阶段和 ts 编译阶段的 sourcemap 生成冲突导致的，建议开发者尽量将条件编译逻辑抽离到单独文件来规避此问题。
内容为 AI 生成，仅供参考

这是一个已知的 uni-app 构建工具在处理条件编译和 TypeScript 时的 sourcemap 生成冲突问题。当 Vue 单文件组件中的 <script> 块同时启用 lang="ts" 和条件编译指令时，构建流程会分两次处理同一文件路径（一次处理条件编译前，一次处理后），导致 sourcemap 内容冲突。

根本原因：uni-app 的构建流程中，条件编译处理和 TypeScript 编译是两个独立的步骤。在生成 sourcemap 时，这两个步骤对同一源文件路径（如 pages/index/index.vue）产生了不同版本的中间代码映射，但都指向同一个源文件路径，从而引发冲突。

临时解决方案：

  1. 关闭 sourcemap：在打包时暂时不启用 sourcemap 功能。
  2. 分离条件编译：将涉及条件编译的逻辑移到单独的 .ts 文件中，在 Vue 文件中引用。例如：
    // utils/platform.ts
// #ifdef H5
export const logPlatform = () => console.log('H5');
// #endif
回到顶部