1

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

目前支持两种模板:

1.“nativescript-vue-template”

这个要简单得多,调试也很容易。已经有一个有用的答案。调试是使用 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 文档配置的应用程序中,当您在 Chrome 开发工具中查看“Sources”时,除了已编译的源代码之外,您还可以访问包含原始代码的“webpack://”节点。您可以在那里设置断点并且它可以工作。

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

我试图按照提到的Vue 文档来解决这个问题。我应该添加

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

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

4

1 回答 1

0
devtool: 'source-map'

Vue 文档中推荐的在此设置中不起作用。当我使用它时它开始工作:

devtool: 'eval-source-map'

阅读Webpack 文档后。

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

于 2018-09-02T07:39:35.483 回答