在 Chrome 中调试 .vue 组件答案

【问题标题】：Debugging .vue component in Chrome在 Chrome 中调试 .vue 组件
【发布时间】：2018-04-18 05:50:09
【问题描述】：

是否可以在 Chrome 中调试 .vue 组件。到目前为止，我只得到橙色标记的源，chrome 没有记录用于调试，即我无法检查变量等。

如何做到这一点？

【问题讨论】：

【解决方案1】：

是的，当然有可能。

首先，您需要确保您使用的是 Vue.js 的非缩小/非生产版本。您可以通过在控制台输出中查看开发工具来验证这一点。如果您的 Vue 版本是允许调试的开发版本，您应该在控制台中看到以下消息。

You are running Vue in development mode.
Make sure to turn on production mode when deploying for production.

其次需要安装Vue.js Devtools插件。

注意：如果您不使用网络服务器，而只是在浏览器“file://somefile.htm”中加载本地文件，则需要进入 chrome 扩展和插件设置并允许插件-in "访问文件 URL 的权限"

第三，您可以打开“源地图”根据您的设置，有不同的方法可以解决这个问题。如果您的项目只是使用 CLI 设置，则找到您的 config/index.js 文件并将 dev-tool 属性设置为 devtool: 'source-map'

如果您使用 Webpack 或 Laravel mix，您可以在 Webpack 配置文件中使用 .sourceMaps() 方法启用源映射。其他更改也可能是必要的。 https://webpack.js.org/configuration/devtool/

【讨论】：

我使用的是vue cli 3，认为已经在开发模式下执行了，但是目前找不到source map的配置。
@skribe 我有同样的问题，我用 vue cli 3 生成了一个项目，但我没有找到 config/index.js 或 vue.config.js 或类似的东西。你能帮我吗？
这有帮助吗？ stackoverflow.com/questions/50977685/…
哦，根据您生成项目的方式，您可能没有配置文件。在这种情况下，只需创建一个。见这里cli.vuejs.org/config/#global-cli-config