前端国际化 VScode i18n Ally 插件使用

最新推荐文章于 2025-04-07 17:56:19 发布

Jay_Tang

最新推荐文章于 2025-04-07 17:56:19 发布

阅读量7k

点赞数 2

文章标签： javascript vue.js es6

本文链接：https://blog.csdn.net/qq_45739293/article/details/116643331

版权

前端国际化 VScode i18n Ally 插件使用
1、安装 i8n Ally 插件
2、修改vscode 配置，添加如下配置

"i18n-ally.localesPaths": [
    "src/locales/lang"
  ],
  "i18n-ally.languageTagSystem": "legacy",
  "i18n-ally.sourceLanguage": "en-US",
  "i18n-ally.displayLanguage": "zh-CN",
  "i18n-ally.namespace": true,
  "i18n-ally.pathMatcher": "{locale}/{namespaces}.{ext}",
  "i18n-ally.annotationInPlace": false,
  "i18n-ally.localeCountryMap": {
    "CHINA": "zh-CN",
    "ENGLISH": "en-US"
  },
  "i18n-ally.regex.usageMatchAppend": ["i18nRender\\(['\"`]({key})['\"`]"],
  "i18n-ally.refactor.templates": [
    "i18nRender('{key}')"
  ]

3、本地locales 语言包目录
在这里插入图片描述
locales/index.js

import Vue from 'vue'
import antLocaleZhCN from 'ant-design-vue/es/locale-provider/zh_CN'
import antLocaleEnUS from 'ant-design-vue/es/locale-provider/en_US'
import VueI18n from 'vue-i18n'

import axios from '@/api/axios'

Vue.use(VueI18n)

const regx = new RegExp('^\\./(?<locale>[\\w-_]+)/(?<namespace>.+)\\.(?<ext>json|ya?ml|json5)$')

// 先把ant 语言包放到配置中
const messages = {
  'zh-CN': {
    antLocale: antLocaleZhCN
  },
  'en-US': {
    antLocale: antLocaleEnUS
  }
}

/**
 * 格式化国际化语言包 将语言包拼接成 pages.login.login: "立即登录" 解构
 * @param {*} namespace
 * @param {*} localeMessages
 */
const getLocalMessagesWithNamespace = function (namespace, localeMessages) {
  if (!namespace) {
    return localeMessages
  }
  namespace = namespace.replace(/\//g, '.')
  const newMessages = {}
  for (const [key, value] of Object.entries(localeMessages)) {
    newMessages[namespace + '.' + key] = value
  }
  return newMessages
}

// 自动加载locales 下的json文件
const requireAll = requireContext => requireContext.keys().map((path) => {
  const lacaleJson = requireContext(path)

  const match = regx.exec(path)
  if (match && match.length > 0) {
    const { locale, namespace } = match.groups || {}
    const localeMessages = messages[locale] || {}
    const messageWithNamespace = getLocalMessagesWithNamespace(namespace, lacaleJson)
    messages[locale] = { ...localeMessages, ...messageWithNamespace }
  }
})
const req = require.context('./', true, /\.json$/)
requireAll(req)

console.log(messages)

export const defaultLang = 'zh-CN'

const i18n = new VueI18n({
  locale: defaultLang,
  fallbackLocale: defaultLang,
  messages
})

export default i18n

export function setI18nLanguage (lang) {
  i18n.locale = lang
  axios.defaults.headers.common['Accept-Language'] = lang
  document.querySelector('html').setAttribute('lang', lang)
  return lang
}

/**
 * i18n Render
 * @param key
 * @returns rendered string
 */
export function i18nRender (key) {
  return i18n.t(key)
}