index.js 1.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960
  1. import { nextTick } from "vue";
  2. import { useI18n, createI18n } from "vue-i18n";
  3. import browser from "@/utils/browser";
  4. export { useI18n, i18n };
  5. export const SUPPORT_LOCALES = ["zh", "en", "ja"];
  6. let i18n;
  7. export function getLocale() {
  8. let lang = browser.getURLParam("lang");
  9. if (!lang) {
  10. lang = window.navigator.language || window.navigator.userLanguage || null;
  11. if (lang && !/^zh/.test(lang)) {
  12. console.log("自动获取浏览器语言:" + lang);
  13. lang = "en";
  14. } else {
  15. lang = "zh";
  16. }
  17. }
  18. document.documentElement.setAttribute("lang", lang);
  19. return lang;
  20. }
  21. export function setupI18n(options = { locale: "zh" }) {
  22. i18n = createI18n(options);
  23. setI18nLanguage(i18n, options.locale);
  24. return i18n;
  25. }
  26. export function setI18nLanguage(i18n, locale) {
  27. if (i18n.mode === "legacy") {
  28. i18n.global.locale = locale;
  29. } else {
  30. i18n.global.locale.value = locale;
  31. }
  32. /**
  33. * NOTE:
  34. * If you need to specify the language setting for headers, such as the `fetch` API, set it here.
  35. * The following is an example for axios.
  36. *
  37. * axios.defaults.headers.common['Accept-Language'] = locale
  38. */
  39. document.querySelector("html").setAttribute("lang", locale);
  40. }
  41. export async function loadLocaleMessages(i18n, locale) {
  42. // load locale messages with dynamic import
  43. // set locale and locale message
  44. const messages = await import(
  45. /* webpackChunkName: "locale-[request]" */ `../locales/${locale}.json`
  46. );
  47. i18n.global.setLocaleMessage(locale, messages.default);
  48. return nextTick();
  49. }
  50. export default setupI18n({
  51. globalInjection: true,
  52. legacy: false,
  53. locale: "",
  54. fallbackLocale: "zh",
  55. });