Nativescript vue devtools 无法连接

Question

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

以下是我尝试过的一些方法：

几种不同的网络，包括有线、public 和私人 wifi，以及移动热点
主机设置为 "localhost" 的本地 Android 模拟器，并且还排除了主机。
物理 android 设备三星 S9 最新 Android OS
从 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/port 是打开的。我还可以制作一个非常基本的网站，添加一个 vue 实例，并粘贴开发人员工具中显示的脚本标签 UI 以表明开发工具正常工作。

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

既然Nativescript的社区搬到了这里，我真的只是希望引起开发者的注意以解决这个问题。如果任何其他人能够提供解决此问题的方法或解决方案，我们也将不胜感激。

提前致谢！

Answer 1

你能试试在你的 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

它更像是一种变通方法，而不是真正的解决方案，但如果它能有所帮助的话 ;)

Answer 2

要让我的 android 模拟器运行 NativeScript vue 应用程序与 Vue Devtools electron 应用程序对话，我需要设置 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 文件来解决此问题。

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

Nativescript vue devtools 无法连接

Nativescript vue devtools does not connect

nativescript

nativescript-vue

vue-devtools