Ember 3.1.2新建项目后IE 11报错，应用无法正常加载

我帮你搞定这个IE11加载失败的问题！你的情况很典型——Ember CLI默认配置没有对IE11做适配，导致现代JS语法（比如箭头函数、const/let）在IE11里触发语法错误，直接卡住页面加载。下面是一步步的修复方案：

1. 更新目标浏览器配置 #

首先打开config/targets.js，把IE11加入到目标浏览器列表里，这样Ember CLI就知道要为它做适配了：

'use strict';

const browsers = [
  'last 1 Chrome versions',
  'last 1 Firefox versions',
  'last 1 Safari versions',
  'ie 11' // 新增这一行，指定要支持IE11
];

module.exports = {
  browsers
};

2. 配置Babel转译与Polyfill #

接下来修改ember-cli-build.js，确保Babel会把代码转译为IE11兼容的ES5语法，同时引入必要的polyfill来填补IE11缺失的API：

'use strict';

const EmberApp = require('ember-cli/lib/broccoli/ember-app');

module.exports = function(defaults) {
  const app = new EmberApp(defaults, {
    babel: {
      targets: {
        browsers: ['ie 11', ...defaults.browsers]
      },
      includePolyfill: true, // 自动引入核心API的polyfill
      presets: [
        ['@babel/preset-env', {
          useBuiltIns: 'usage',
          corejs: 3
        }]
      ]
    }
  });

  return app.toTree();
};

3. 安装必要依赖 #

执行下面的命令安装Babel预设和core-js（提供polyfill的核心库）：

npm install --save-dev @babel/preset-env core-js@3

如果用Yarn的话：

yarn add --dev @babel/preset-env core-js@3

4. （可选）处理未转译的第三方依赖 #

如果你的应用用了某些第三方addon，它们可能没有自己做IE11适配，这时候需要把它们加入Babel的转译路径。比如某个叫ember-some-addon的依赖没转译，就在ember-cli-build.js的babel配置里加：

babel: {
  // 其他配置...
  includePaths: ['node_modules/ember-some-addon']
}

最后验证 #

做完上面的步骤后，重启ember serve，再打开IE11访问应用，应该就能正常加载了——不管是用--no-welcome创建的空应用，还是默认的仓鼠页面，都能正常显示。

内容的提问来源于stack exchange，提问作者gy.om