Vue NativeScript热模块重载（HMR）异常问题咨询

你遇到的问题确实是当前版本组合（nativescript-vue@2.9.0 + @nativescript/webpack@5.0.6）下存在的已知HMR兼容性问题，这类问题在NativeScript-Vue 2.x配合Webpack 5的场景中时有发生——控制台显示HMR成功但JS变更未生效，根源是组件JS部分的热更新逻辑未正确触发。

以下是针对性解决步骤：

1. 升级Webpack依赖 #

先将@nativescript/webpack升级到兼容的修复版本，新版本修复了部分HMR逻辑漏洞：

npm install @nativescript/webpack@~5.0.18 --save-dev

2. 调整Webpack配置 #

修改webpack.config.js，添加Vue组件热重载的专属配置，确保JS变更能被正确捕获并更新：

const webpack = require("@nativescript/webpack");
const { VueLoaderPlugin } = require('nativescript-vue/webpack');

module.exports = (env) => {
    webpack.init(env);

    // 配置Vue HMR支持
    webpack.chainWebpack((config) => {
        // 确保VueLoaderPlugin加载
        config.plugin('vue-loader-plugin').use(VueLoaderPlugin);
        
        // 启用Vue组件热重载
        config.module.rule('vue')
            .use('vue-loader')
            .tap(options => {
                options.hotReload = true;
                options.hotReloadOptions = {
                    ignoreList: ['/node_modules/', '/platforms/']
                };
                return options;
            });
    });

    return webpack.resolveConfig();
};

3. 检查组件导出规范 #

确保Home组件采用标准Vue组件写法，避免非标准导出导致HMR无法识别：

// app/components/Home.vue
<template>
  <Page>
    <ActionBar title="首页" />
    <StackLayout class="p-20">
      <Label :text="message" class="h2 text-center" />
    </StackLayout>
  </Page>
</template>

<script lang="ts">
export default {
  data() {
    return {
      message: '初始消息'
    };
  },
  methods: {
    updateMessage() {
      this.message = '更新后的消息';
    }
  }
};
</script>

<style scoped>
/* CSS变更可正常重载，无需调整 */
</style>

4. 清除缓存并重启服务 #

完成修改后，清除项目缓存并重启开发服务，确保配置生效：

# 清除依赖与构建缓存
rm -rf node_modules platforms package-lock.json
npm install

# 重启开发服务
ns run android

若问题仍存在，可尝试将nativescript-vue升级到~2.9.2版本，该版本也修复了部分HMR相关bug。

内容的提问来源于stack exchange，提问作者Александр Железовский