VueJS 2.0项目Chrome查看页面源码不显示组件渲染HTML求助

首先明确一点：你遇到的「查看页面源码只有<div id="app"></div>」的情况，和Webpack Sourcemap完全无关。Sourcemap的作用是帮你在调试时映射编译后的代码到原始源码（比如.vue文件），和页面初始HTML的内容没有关系。

为什么会看不到渲染后的完整HTML？因为你用vue-cli的webpack simple初始化的是一个单页应用（SPA），这类应用的工作机制是：

浏览器先加载一个仅包含挂载节点（也就是<div id="app"></div>）的静态HTML，然后通过加载并执行JavaScript代码，动态地将Vue组件渲染到这个挂载节点中。

所以「查看页面源码」展示的是服务器返回的原始静态HTML，而动态渲染后的内容只存在于浏览器的内存DOM中，不会出现在原始源码里。

解决方法： #

• 查看渲染后的完整HTML：直接打开Chrome开发者工具（快捷键F12或Ctrl+Shift+I），切换到「Elements」面板，这里就能看到所有Vue组件渲染后的完整DOM结构，包括动态生成的内容。
• 如果需要让原始页面源码包含渲染后的内容：这种场景通常是为了SEO或者让不支持JS的工具抓取内容，你可以考虑使用预渲染（Prerendering）或者服务端渲染（SSR）。对于webpack simple模板，预渲染是更轻量的方案，你可以安装prerender-spa-plugin并配置webpack，打包时生成包含渲染后内容的静态HTML。
• 关于Sourcemap的配置（如果需要调试Vue源码）：webpack simple模板默认的开发环境配置里应该已经开启了Sourcemap，但如果没有，你可以在webpack.config.js中设置devtool选项，比如：

  module.exports = {
    // ...其他配置
    devtool: 'cheap-module-eval-source-map' // 开发环境推荐
  }
  

  这样配置后，在Chrome开发者工具的「Sources」面板里就能找到你的.vue组件源码，方便断点调试。

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