如何在非JSP的纯HTML文件中使用Java Locale类与Resource Bundle资源？

方案1：后端暴露i18n字典接口，前端按需拉取 #

• 后端实现逻辑
  复用你现有的Resource Bundle和本地化工具类，新增REST接口，支持按语言编码返回当前语言下的全量/指定词条的键值对JSON，可添加服务端缓存避免重复读取资源文件。
  示例Spring Boot接口代码：

  @RestController
  @RequestMapping("/api/i18n")
  public class I18nController {
      @Autowired
      private MessageSource messageSource;
      
      @GetMapping("/dict")
      public Map<String, String> getI18nDict(Locale locale) {
          // 可自行实现按传入的key列表返回指定词条，减少响应体积
          Set<String> allKeys = loadAllI18nKeys(); // 自行实现加载所有i18n键的逻辑
          Map<String, String> dict = new HashMap<>();
          for (String key : allKeys) {
              dict.put(key, messageSource.getMessage(key, null, locale));
          }
          return dict;
      }
  }
  

• 前端实现逻辑
  页面初始化时优先拉取对应语言的i18n字典，存在localStorage或内存变量中，封装全局取值方法即可实现全页面案替换。
  示例JS代码：

  let i18nDict = {};
  // 初始化i18n
  async function initI18n(lang = 'zh_CN') {
      const res = await fetch(`/api/i18n/dict?lang=${lang}`);
      i18nDict = await res.json();
      // 自动替换页面上带data-i18n属性的静态文案
      document.querySelectorAll('[data-i18n]').forEach(el => {
          el.textContent = i18nDict[el.getAttribute('data-i18n')] || el.getAttribute('data-i18n');
      });
  }
  // 全局取值方法，动态文案直接调用
  function t(key) {
      return i18nDict[key] || key;
  }
  

  HTML用法示例：

  <!-- 静态文案直接加属性即可 -->
  <button data-i18n="login.submit"></button>
  <!-- 动态文案调用全局方法 -->
  <script>
      $('.error-tip').text(t('login.username.empty'));
  </script>
  

优势：完全复用后端现有i18n资源，不需要前后端维护两套词条，支持无刷新切换语言。
注意点：词条量较大时可按模块拆分拉取，降低单次请求体积。

方案2：后端预生成i18n静态JS文件，前端直接引入 #

• 实现逻辑
  项目构建/启动阶段，把所有语言的Resource Bundle分别生成为对应JS配置文件，存到静态资源目录，格式如下：

  // i18n_zh_CN.js 文件内容
  window.i18nDict = {
      "login.username": "用户名",
      "login.password": "密码"
  };
  

  前端根据当前语言动态引入对应JS文件即可，和方案1一样封装全局取值方法使用。
  优势：无额外AJAX请求，加载速度更快，适合词条固定不常变更的场景。
  注意点：切换语言需要动态加载对应JS文件，资源文件变更后需要重新生成JS同步到静态资源目录。

方案3：后端接口直接返回本地化后的文案 #

如果前端仅需要展示接口返回的提示类文案，没有大量静态文案需要翻译，可以直接在现有接口中用已有本地化逻辑处理返回值，前端直接渲染即可，无需额外适配。
示例后端代码：

@GetMapping("/api/login")
public Result login(String username, String password, Locale locale) {
    if (StringUtils.isBlank(username)) {
        String errTip = messageSource.getMessage("login.username.empty", null, locale);
        return Result.fail(errTip);
    }
    // 业务逻辑
}

优势：改动最小，不需要前端做额外i18n适配，适合文案全部由后端控制的场景。
注意点：页面静态文案无法复用后端i18n资源，适用场景有限。

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