vue-i18n国际化的正确姿势前端vue3全局国际化敏捷开发方案，插件式完成繁琐的国际化工作，支持自定义词库翻译、一键

1. 背景介绍

近期项目前端改造，由AngularJs升级Vue3，领导要求新框架前后端都需要支持国际化，几个开发人员一个星期搞定这个大型物流系统。这里又不得不吐槽一下这些资本家，又想产品好，又不想投入太多成本，把程序猿当牛马使。为了赚钱，小编还是不得不屈服，只能看下国际化的解决方案。

经过小编各方面的选项研究，自己整理总结出了下面这个实用快捷的国际化方案

2、插件介绍

Du I18N为本地开发工作提供敏捷的开发模式，提供一键扫描中文、提取文案、文案回显、在线翻译、文案上传、拉取线上文案、翻译漏检、切换语言以及分析统计等功能。i18n技术栈，兼容vue2，vue3，react，js/ts，同时满足不同阶段多语言发展的开发模式，无论是本地保存文案模式，还是线上保存文案模式皆可适用。

2.1 功能

支持文案回显
支持一键扫描中文
支持中文提取到指定文件
支持本地或远程在线翻译
支持文案上传到远程服务
支持拉取线上文案，定位文案的代码位置
支持翻译漏检功能
支持语言切换显示
支持分析统计
支持配置化，满足不同开发场景

2.2 兼容性

开发模式：支持多种不同阶段多语言发展的开发模式，保存在本地的模式，保存在线上的模式；
技术栈：i18n，兼容vue2，vue3，react（含js和ts）

3、使用

3.1 引入vue-i18n

package.json引入vue-i18n依赖

npm install后进行国际化的配置，其中zh.json和en.json为国际化语言文件json(vue-i18n的使用和element原生组件国际化可自行百度)

import { createI18n } from 'vue-i18n'
import zh from '@/i18n/lang/zh.json'
import en from '@/i18n/lang/en.json'

export const getCurrentLanguage = () => {
  //设置
  const UAlang = navigator.language // zh-CN
  const langCode = UAlang.indexOf('zh') !== -1 ? 'zh' : 'en'
  if (localStorage.getItem('lang')) {
    return localStorage.getItem('lang')
  }
  localStorage.setItem('lang', langCode)
  return langCode
}

export const setCurrentLanguage = (lang: string) => {
  i18n.global.locale.value = lang
  localStorage.setItem('lang', lang)
}

const i18n = createI18n({
  locale: getCurrentLanguage() || 'zh', // 默认显示语言
  legacy: false,
  globalInjection: true, // 全局注册$t方法
  allowComposition: true,
  messages: {
    en: {
      ...en
    },
    zh: {
      ...zh
    }
  }
})

export default i18n

3.2 安装vs code插件Du I18N

插件市场搜索Du I18N并进行安装

3.3 项目生成国际化配置文件

打开某个页面，然后右键=>【设置】

配置内容按需修改，以下为小编的配置，可以直接cv

{
	"quoteKeys": [
		"i18n.global.t"
	],
	"defaultLang": "zh",
	"tempLangs": [
		"zh",
		"en"
	],
	"langPaths": "**/src/i18n/lang/**",
	"transSourcePaths": "**/src/i18n/locales/**",
	"tempPaths": "**/src/i18n/locales/**",
	"tempFileName": "i18n-needTranslate.json",
	"multiFolders": [
		"src",
		"pages"
	],
	"uncheckMissKeys": [],
	"isSingleQuote": true,
	"isOnlineTrans": true,
	"bigFileLineCount": 5000,
	"baiduAppid": "20240709002095242",
	"baiduSecrectKey": "wQ4mYj3_Hl6XTlMp5NR7"
}