Ember 4.2中如何启用热重载功能？

Ember 4.2支持无需全页刷新的热重载功能，以下是具体实现方案及问题排查：

官方内置热重载（推荐） #

Ember CLI从3.x版本起就内置了基础热重载能力，Ember 4.2默认已启用，无需额外插件：

1. 确认ember-cli版本为4.2.x（与Ember版本匹配），可通过ember --version查看。
2. 检查ember-cli-build.js，确保未禁用热重载：

   module.exports = function(defaults) {
     let app = new EmberApp(defaults, {
       // 确保没有liveReload: false的配置，若存在则改为true或删除
       // ...其他项目配置
     });
     return app.toTree();
   };
   

3. 启动开发服务器ember serve，修改模板（.hbs）、组件JS文件时，页面会自动局部更新，无需全页刷新。

修复ember-ast-hot-load无法运行的问题 #

若你需要更精细的AST层面热重载，可通过以下步骤排查：

• 安装适配Ember 4.2的插件版本：

  npm install ember-ast-hot-load@^2.0.0 --save-dev
  

• 在config/environment.js中启用插件：

  module.exports = function(environment) {
    let ENV = {
      // ...其他环境配置
      'ember-ast-hot-load': {
        enabled: true
      }
    };
    return ENV;
  };
  

• 排查冲突：禁用其他可能干扰AST解析的旧插件（如某些代码格式化、转换工具），清除项目缓存ember clear后重启服务器。

注意事项 #

• 路由定义、服务代码等核心逻辑修改仍需全页刷新，这是Ember框架的固有限制，热重载主要针对UI层代码（模板、组件）。
• 若热重载仍失效，可尝试删除node_modules和package-lock.json，重新执行npm install后重启服务。

内容的提问来源于stack exchange，提问作者Samuele Cavalleri