使用vue-cli-template时调试NativeScript-Vue

Question

我正在尝试找出调试用NativeScript-Vue编写的应用程序并使用“vue-cli-template”的正确方法。

目前支持两种模板：

1.“nativescript-vue-template”

这个更简单，调试很容易。已经有一个useful answer on。调试是使用chrome-devtools完成的。此模板不使用vue-cli / Webpack / Babel，因此您可以在Chrome中查看的“来源”不会以任何方式更改。您可以在那里轻松设置断点。只是运行例如：

tns debug android

您还可以使用非常好的VS Code插件。

这个使用vue-cli / Webpack / Babel，因此可以用不同的方式编译.vue单文件组件。

使用全新安装的“vue-cli-template”作为示例：

跑：

npm run debug:android

当您查看模板中提供的“Hello world”演示应用程序的“Sources”时，app.js文件包含17700行代码。它基本上是编译的dist / app / app.android.js文件。

我有一些基于vue-cli的应用程序的经验。在根据Vue documentation配置的应用程序中，当您在Chrome开发工具中查看“源”时，除了编译的源之外，您还可以访问包含原始代码的“webpack：//”节点。你可以在那里设置断点并且它有效。

不幸的是，“vue-cli-template”不能以这种方式工作。没有“webpack：//”节点可用。您只能访问已编译的源。

我试图按照提到的Vue documentation来解决这个问题。我应该补充一下

module.exports = {
  configureWebpack: {
    devtool: 'source-map'
  }
}

到vue.config.js文件。模板没有它。我应该创建一个吗？如果是的话，在哪里？也许我需要其他Webpack配置？

Answer 1

devtool: 'source-map'

在Vue documentation中推荐不适用于此设置。它在我使用时开始工作：

devtool: 'eval-source-map'

我将此选项直接添加到webpack.config.js文件中 - 不使用任何vue.config.js文件。