我试图找出正确的方法来调试用 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 配置?