javascript - 在 Chrome 中调试 .vue 组件

Question

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

如何实现？

Answer 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插件

https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd?hl=en

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

---

第三，您可以打开“source map” 根据您的设置，有不同的方法可以做到这一点。如果您的项目只是使用 CLI 设置的，那么找到您的 config/index.js 文件并将 dev-tool 属性设置为 devtool: 'source - map '

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