如何基于浏览器区域设置修复Ember-moment日期格式化异常？

嘿，我之前也碰到过一模一样的坑！你已经配置了includeLocales: true但还是显示美式格式，核心问题是Ember-moment不会自动检测并应用浏览器的区域设置——哪怕你打包了所有locale，也得主动告诉moment该用哪个。下面给你一步步解决的办法：

第一步：确保目标Locale被正确打包 #

虽然includeLocales: true理论上会包含所有moment locale，但有时候打包工具可能会有遗漏，或者为了减小包体积，更稳妥的方式是明确指定你需要的locale（比如法语fr）。修改config/environment.js：

module.exports = function(environment) {
  let ENV = {
    // ... 其他原有配置
    moment: {
      includeLocales: ['fr'] // 明确加入法语locale，也可以保留true同时添加这个数组
    }
  };
  // ...
  return ENV;
};

第二步：自动读取浏览器Locale并设置全局Moment语言 #

Ember初始化器是干这件事的最佳场景——应用启动时自动检测浏览器语言，同步给moment：

1. 先生成初始化器文件：

ember generate initializer set-moment-locale

2. 打开app/initializers/set-moment-locale.js，替换成下面的代码：

import moment from 'moment';

export function initialize() {
  // 获取浏览器的默认语言（兼容不同浏览器写法）
  const browserLocale = navigator.language || navigator.userLanguage;
  // 把moment的全局语言设置为浏览器语言
  moment.locale(browserLocale);
}

export default {
  initialize
};

这样一来，moment就会自动跟着浏览器的区域设置走了。

第三步：快速验证是否生效 #

如果想立刻确认locale文件有没有加载成功，可以在模板里手动指定locale测试：

{{moment-format currentShop.shop.openingDate 'L' locale='fr'}}

如果这个能显示出法语格式的日期（比如27/03/2018），说明locale没问题，那第二步的初始化器就能彻底解决你的问题。

额外小提示 #

• 有些浏览器返回的locale是带地区后缀的（比如fr-FR），moment会自动识别并匹配对应的语言包，不用额外处理；
• 如果你的应用支持用户手动切换语言，只需要在切换逻辑里调用moment.locale(用户选择的语言码)就行，全局格式化会自动更新。

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