为什么手机上调试 Vue 页面时 DevTools 看不到源码？

玉宸 Dev 提问于 2026-03-29 22:57:15 阅读 3

移动

我用 Chrome 连真机调试一个 Vue 项目，页面能打开，但 DevTools 的 Sources 里只看到打包后的 JS，根本找不到原始的 .vue 文件。明明本地开发时 devServer 开着 sourcemap 啊，咋回事？

我的 vue.config.js 里已经设了 productionSourceMap: true，而且本地浏览器调试是正常的。手机连 USB 调试也开了，Chrome 地址栏输入 chrome://inspect 也能识别设备。就是看不到源码，断点都打不了。

<template>
  <div class="counter">
    <button @click="count++">+1</button>
    <p>{{ count }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return { count: 0 }
  }
}
</script>

移动调试

我来解答赞 4 收藏

反馈

1 条解答

Good“红静 Lv1

检查一下你的 vue.config.js，除了设置 productionSourceMap: true，还得确保 devtool: 'source-map' 在生产环境配置里。手机调试需要明确开启 source map 支持，不然 DevTools 只能看到打包后的代码。

module.exports = {

  productionSourceMap: true,

  configureWebpack: {

    devtool: 'source-map'

  }

}

记得重新构建项目，然后在手机上刷新页面试试。这问题搞了我好几次，确实容易忽略。

2026-03-29 23:07