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

Question

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

当前支持两种模板：

1。 “ nativescript-vue-template”

这个简单得多，调试起来也很容易。上面已经有useful answer 。使用chrome-devtools完成调试。该模板不使用vue-cli / Webpack / Babel，因此您在Chrome中可以查看的“源”没有任何变化。您可以在此处轻松设置断点。 只需运行例如：

tns debug android

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

2。 “ vue-cli-template”

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

以全新安装的“ vue-cli-template”为例：

运行：

npm run debug:android

当您查看模板中提供的“ Hello world”演示应用程序的“源”时，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 documentation之后。

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