Nativescript-vue + Typescript - HMR 不适用于 Vue Class 组件

Question

环境

命令行界面：6.5.0
跨平台模块：6.5.1
Android 运行时间：6.5.0
iOS 运行时：6.5.0

描述错误

用vue class组件样式+打字稿保存任何文件时，它根本不更新。给我以下错误：

File change detected. Starting incremental webpack compilation...
Successfully transferred bundle.609c813aedb0d81fb57e.hot-update.js on device emulator-5554.
Successfully transferred 609c813aedb0d81fb57e.hot-update.json on device emulator-5554.
JS: HMR: Checking for updates to the bundle with hmr hash 609c813aedb0d81fb57e.
JS: HMR: Ignored an update to unaccepted module: 
JS: HMR:          ➭ ./routes.ts
JS: HMR:          ➭ ./main.ts
JS: HMR: Cannot apply update with hmr hash 609c813aedb0d81fb57e.
JS: HMR: Aborted because ./routes.ts is not accepted
JS: Update propagation: ./routes.ts -> ./main.ts
Refreshing application on device emulator-5554...
Successfully transferred bundle.js on device emulator-5554.
Successfully transferred runtime.js on device emulator-5554.
Successfully transferred vendor.js on device emulator-5554.
JS: HMR: Cannot apply update. A previous update aborted. Application needs to be restarted in order to apply the changes.
Restarting application on device emulator-5554...

这会导致整个应用程序重新启动，没有 HRM 更新。

重现

基于 nativescript 博客 NativeScript-Vue with Class Components 更多示例 link。

npm install -g @vue/cli @vue/cli-init
vue 初始化 nativescript-vue/vue-cli-template hmrbug。（Select 打字稿）
npm i vue-class-组件
npm i vue-属性-装饰器

下一个：创建以下模板：

<Label text="Hello" textWrap="true" />

然后在文字中加一句你好

<Label text="Hello Hello" textWrap="true" />

检查错误。

预期行为

无需重启整个应用程序即可使用著名的HMR。我认为这是一个严重的问题或错误，因为它会降低开发人员在等待应用程序重启时的工作效率。

Answer 1

请使用`tns debug android --no-hmr`

在 nativescript-vue 和 HMR 中不受保证。 HMR 只能在更改样式文件时使用。

我个人使用

我 tns debug android 仅用于造型。如果我进行任何其他更改，我不信任 HMR。

我添加了一个名为 yarn devan 的 yarn 脚本来加快打字过程。

我已将以下行添加到我的 package.json 文件

{
  "scripts": {
    "dev": "tns debug android",
    "devan": "tns debug android --no-hmr",
    "devin": "tns debug ios --no-hmr",
    "un": "adb uninstall com.domain.yourapp"
  },
}

如果您在 nativescript-vue 项目中使用 typescipt 文件，您将始终看到 HMR 错误消息。

JS: HMR: Checking for updates to the bundle with hmr hash 7d5f6392d6103f1496e6.
JS:  WARN  HMR: Ignored an update to unaccepted module: 
JS:  WARN  HMR:          ➭ ./routes/index.ts
JS:  WARN  HMR:          ➭ ./main.ts
JS:  ERROR  HMR: Cannot apply update with hmr hash 7d5f6392d6103f1496e6.
JS:  ERROR  HMR: Aborted because ./routes/index.ts is not accepted
JS: Update propagation: ./routes/index.ts -> ./main.ts

Answer 2

我得到了带有 HMR 项目的 Nativescript-Vue + Typescript working.Just 请注意（根据 rigor 自己的说法，NS-Vue 的创建者）最好在使用样式时启用 HMR。

这是问题和解决我的问题的线索：https://github.com/Lyduz/nitibo/issues/19

Nativescript-vue + Typescript - HMR 不适用于 Vue Class 组件

Nativescript-vue + Typescript - HMR not working on Vue Class Component

typescript

nativescript