时间戳

首页 > 解决方案 > Nativescript vue devtools 连接不上

nativescript - Nativescript vue devtools 连接不上

问题描述

大约一周前，nativescript 失去了与 vue devtools 对话的能力。在 github 上查看此问题。运行此repo 以重现-- （您需要将host变量更改为main.js计算机的网络地址）。

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

  1. 几种不同的网络，包括有线、公共和私人 wifi 以及移动热点
  2. 主机设置为“localhost”并且主机被排除在外的本地 Android 模拟器。
  3. 具有最新 Android 操作系统的物理 android 设备三星 S9
  4. 从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：您正在失去用户对这个问题做出原生反应（请参阅上面问题链接中的评论）。Vue devtools 刚刚发布了一个新版本，宣传更好的 nativescript 支持，但我们完全无法尝试！

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

提前致谢！

标签： nativescriptnativescript-vuevue-devtools

解决方案

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

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

<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 文件来解决这个问题。

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

推荐阅读