vue 国际化开发

引入i18n

import i18n from './i18n'

1、 在src目录下创建i18n.js。i18n.js内容

import Vue from "vue";
import VueI18n from "vue-i18n";

Vue.use(VueI18n);

function loadLocaleMessages() {
  const locales = require.context(
    "./locales",
    true,
    /[A-Za-z0-9-_,\s]+\.json$/i
  );
  const messages = {};
  locales.keys().forEach((key) => {
    const matched = key.match(/([A-Za-z0-9-_]+)\./i);

    if (matched && matched.length > 1) {
      const locale = matched[1];
      messages[locale] = locales(key);
    }
  });
  return messages;
}
function getLanguage() {
  if (localStorage && localStorage.locale) {
    return localStorage.locale;
  }
  // 使用系统语言，如果语言文件中没有则使用 en
  return (navigator.language || navigator.userLanguage).split("-")[0];
}

// locale
export default new VueI18n({
  locale: getLanguage(),
  fallbackLocale: "en",//这里是语言模板名称
  messages: loadLocaleMessages(),
});

2、在src目录下创建locale文件夹，并创建语言模板（如：en.json、zh.json等）
3、在main.js中注册全局

import i18n from './i18n'

(1)、通过缓存来配置,在main.js中

// 获取当前缓存语言包类型（也可以使用cookie）,如果存在则获取当前语言包，不存在则默认en;
i18n.locale = localStorage.getItem('locale')?localStorage.getItem('locale'):'en';

//注册到全局 在 new Vue（{}）中加入i18n

(2)、通过路由来获取当前语言