Nativescript vue devtools 连接不上

Posted 2023-04-13

【中文标题】Nativescript vue devtools 连接不上

【英文标题】：Nativescript vue devtools does not connect

【发布时间】：2019-08-19 18:58:53

【问题描述】：

似乎大约一周前，nativescript 失去了与 vue devtools 对话的能力。见this issue on github。运行此repo to reproduce -- （您需要将main.js 中的host 变量更改为您计算机的网络地址）。

以下是我尝试过的一些事情：

几种不同的网络，包括有线、公共和专用 wifi 以及移动热点 主机设置为“localhost”并且主机被排除在外的本地 android 模拟器。 具有最新 Android 操作系统的物理 android 设备 Samsung S9 从nativescript-vue-devtools 包中获取代码并添加控制台日志记录。在connect_error -> reconnect 循环中连接到 devtools 套接字时似乎卡住了。不幸的是，连接错误事件的参数为空，因此没有明确的失败原因。

这是来自该项目的package.json——它们都是使用 CLI 初始化项目后的默认值：

  "name": "nsvue-devtools-test",
  "version": "1.0.0",
  "description": "A native application built with NativeScript-Vue",
  "author": "Will P.",
  "license": "MIT",
  "nativescript": 
    "id": "org.nativescript.application",
    "tns-ios": 
      "version": "5.0.0"
    ,
    "tns-android": 
      "version": "5.0.0"
    
  ,
  "dependencies": 
    "vuex": "^3.0.1",
    "@vue/devtools": "5.0.0-beta.3",
    "nativescript-socket.io": "^0.9.0",
    "nativescript-vue-devtools": "^1.0.0",
    "nativescript-toast": "^1.4.6",
    "nativescript-vue": "^2.0.0",
    "tns-core-modules": "^5.0.2"
  ,
  "devDependencies": 
    "@babel/core": "^7.0.0",
    "@babel/preset-env": "^7.0.0",
    "babel-loader": "^8.0.2",
    "babel-traverse": "6.26.0",
    "babel-types": "6.26.0",
    "babylon": "6.18.0",
    "clean-webpack-plugin": "^0.1.19",
    "copy-webpack-plugin": "^4.5.2",
    "css-loader": "^1.0.0",
    "lazy": "1.0.11",
    "nativescript-dev-webpack": "next",
    "nativescript-vue-template-compiler": "^2.0.0",
    "nativescript-worker-loader": "~0.9.0",
    "node-sass": "^4.9.2",
    "sass-loader": "^7.1.0",
    "terser-webpack-plugin": "^1.1.0",
    "vue-loader": "^15.2.6",
    "webpack": "^4.16.4",
    "webpack-bundle-analyzer": "~2.13.1",
    "webpack-cli": "^3.1.0"
  

我还尝试使用最新版本的 nativescript toast 和 vue devtools 进行另一个项目，结果相同——vue devtools 永远不会从默认屏幕更改。

我可以使用带有 nmap 的 termux 从我的调试设备上进行扫描，并查看我的 IP/端口是否打开。我还能够制作一个非常基本的网站，添加一个 vue 实例，并粘贴开发者工具 UI 中显示的脚本标签，以表明 devtools 工作正常。

Nativescript：您正在失去用户对这个问题做出原生反应（请参阅上面问题链接中的 cmets）。 Vue devtools 刚刚发布了一个新版本，宣传更好的 nativescript 支持，但我们完全无法尝试！

由于 Nativescript 的社区已经搬到这里，我真的只是希望引起开发人员的注意来解决这个问题。如果其他人能够为此问题提供解决方法或解决方案，也将不胜感激。

提前致谢！

【参考方案1】：

要让我的 android 模拟器运行 NativeScript vue 应用程序与 Vue Devtools 电子应用程序对话， 我需要将android设置为允许明文流量

在 AndroidManifest.xml 中 放 android:usesCleartextTraffic="true" 在现有节点上。 例如

<application
        android:name="com.tns.NativeScriptApplication"
        android:allowBackup="true"
        android:icon="@drawable/icon"
        android:label="@string/app_name"
        android:theme="@style/AppTheme"
        android:usesCleartextTraffic="true"
    >

此解决方案来自此评论 https://github.com/nativescript-vue/nativescript-vue-devtools/issues/8#issuecomment-496292399

也可以通过创建或修改 network_security_config.xml 文件来解决这个问题。

我怀疑这是您想要提交并在生产中进行的更改，因此我仅在本地开发中使用它。

【参考方案2】：

你能在你的 package.json 中试试这个 deps：

"nativescript-toasty": "^1.3.0",
"nativescript-socketio": "^3.2.1",
"nativescript-vue-devtools": "github:anthonny/nativescript-vue-devtools#master",

我不使用nativescript-socket.io 和nativescript-toast，而是使用nativescript-socketio（没有.）和nativescript-toasty

与其说是真正的解决方案，不如说是一种解决方法，但如果它可以提供帮助的话;)

【讨论】：

嗯，遗憾的是，我对这些软件包也有同样的行为。我继续将 nativescript-vue-devtools 代码复制到我的测试项目中，并将其设置为记录所有套接字事件，它似乎永远卡在 connect_error -> reconnect 循环中。在工作中尝试了几个不同的 wifi 网络和我的移动热点。打算在家试一试，看看是不是网络问题。