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

Question

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

目前支持两种模板：

1。 "nativescript-vue-template"

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

tns debug android

你也可以使用非常棒的 VS Code 插件。

2。 “vue-cli-模板”

这个使用vue-cli/Webpack/Babel，这样.vue Single File Components可以用不同的方式编译。

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

运行：

npm run debug:android

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

我对基于 vue-cli 的应用程序有一些经验。在根据Vue documentation 配置的应用程序中，当您在 Chrome 开发工具中查看“Sources”时，除了已编译的源之外，您还可以访问包含原始代码的“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 文件。