doc

i18n

在项目中加入了i18n, 使其更加”国际化”, 加入这目的在于让项目应用层更丰富和复杂点. 使用了Lazy loading translations, 懒加载让这个引入并没有增加页面资源文件大小
这个引入让页面更丰富了, 而且很巧妙, 结合了Vue Router, 这让我也进一步学习了Vue Router的api

Vue Router

用到了Vue Router一个很重要的接口

router.beforeEach((to, from, next) => {
  const { name } = to;
  loadLanguageAsync(lang, name).then(() => next());
});

loadLanguageAsync

安装了vue-i18n库, 在异步上, 我这项目上在异步加载上更细一点, 比文档demo上要更复杂一点, 以下是按路由名加载, 这样懒加载更琐碎, 页面的多与少对启动文件的大小没太大影响.

export function loadLanguageAsync(lang, name) {
  if (i18n.locale !== lang) {
    setI18nLanguage(lang);
    return loadLanguageAsync(lang, 'app').then(() => loadLanguageAsync(lang, name));
  }

  if (!loadedLanguages.includes(name)) {
    return import(`@/lang/${name}/${lang}`).then((msgs) => {
      i18n.setLocaleMessage(lang, {
        ...i18n.messages[lang],
        [name]: msgs.default,
      });
      loadedLanguages.push(name);
      return Promise.resolve(lang);
    });
  }
  return Promise.resolve(lang);
}