Vue前端使用I18实现中英文切换

一、配置vue-i18

1. 进入src/locales/index.js

javascript">import { createI18n } from 'vue-i18n'
import zh*** from 'ant-design-vue/es/locale/zh_***'
import enGB from 'ant-design-vue/es/locale/en_GB'
import zh_*** from './lang/zh-***.js'
import en from './lang/en.js'

import tool from '@/utils/tool'
import sysConfig from '@/config/index'

export const messages = {
	'zh-***': {
		lang: zh***,
		...zh_***
	},
	en: {
		lang: enGB,
		...en
	}
}

const i18n = createI18n({
	locale: tool.data.get('APP_LANG') || sysConfig.LANG,
	fallbackLocale: 'zh-***',
	globalInjection: true,
	messages
})

export default i18n

2. 查看 src/utils/tool.js文件

import { notification } from 'ant-design-vue';

const tool = {}

// 以下使用中英翻译用到该方法！！！
// localStorage
tool.data = {
	set(table, settings) {
		const _set = JSON.stringify(settings)
		return localStorage.setItem(table, _set)
	},
	get(table) {
		let data = localStorage.getItem(table)
		try {
			data = JSON.parse(data)
		} catch (err) {
			return null
		}
		return data
	},
	remove(table) {
		return localStorage.removeItem(table)
	},

	clear() {
		return localStorage.clear()
	}
}

// sessionStorage
tool.session = {
	set(table, settings) {
		const _set = JSON.stringify(settings)
		return sessionStorage.setItem(table, _set)
	},
	get(table) {
		let data = sessionStorage.getItem(table)
		try {
			data = JSON.parse(data)
		} catch (err) {
			return null
		}
		return data
	},
	remove(table) {
		return sessionStorage.removeItem(table)
	},
	clear() {
		return sessionStorage.clear()
	}
}

// 千分符
tool.groupSeparator = (num) => {
	num = `${num}`
	if (!num.includes('.')) num += '.'

	return num
		.replace(/(\d)(?=(\d{3})+\.)/g, ($0, $1) => {
			return `${$1},`
		})
		.replace(/\.$/, '')
}

// 获取所有字典数组
tool.dictDataAll = () => {
	return tool.data.get('DICT_TYPE_TREE_DATA')
}

// 字典翻译方法，界面插槽使用方法 {{ $TOOL.dictType('sex', record.sex) }}
tool.dictTypeData = (dictValue, value) => {
	const dictTypeTree = tool.dictDataAll()
	if (!dictTypeTree) {
		return '需重新登录'
	}
	const tree = dictTypeTree.find((item) => item.dictValue === dictValue)
	if (!tree) {
		return '无此字典'
	}
	const children = tree.children
	const dict = children.find((item) => item.dictValue === value)
	return dict?.name || '无此字典'
}

// 获取某个code下字典的列表，多用于字典下拉框
tool.dictTypeList = (dictValue) => {
	const dictTypeTree = tool.dictDataAll()
	if (!dictTypeTree) {
		return []
	}
	const tree = dictTypeTree.find((item) => item.dictValue === dictValue)
	if (tree && tree.children) {
		return tree.children
	}
	return []
}

// 获取某个code下字典的列表，基于dictTypeList 改进，保留老的，逐步替换
tool.dictList = (dictValue) => {
	const dictTypeTree = tool.dictDataAll()
	if (!dictTypeTree) {
		return []
	}
	const tree = dictTypeTree.find((item) => item.dictValue === dictValue)
	if (tree) {
		return tree.children.map((item) => {
			return {
				value: item['dictValue'],
				label: item['name']
			}
		})
	}
	return []
}

// 生成UUID
tool.snowyUuid = () => {
	let uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
		let r = (Math.random() * 16) | 0,
			v = c === 'x' ? r : (r & 0x3) | 0x8
		return v.toString(16)
	})
	// 首字符转换成字母
	return 'xn' + uuid.slice(2)
}

tool.sortBy = (property) => {
	return function (value1, value2) {
		let a = value1[property]
		let b = value2[property]

		return a < b ? 1 : a > b ? -1 : 0
	}
}

tool.sortBy = (property, asc) => {
	//默认升序,不能写在闭包里面，写在闭包里面是无效的……asc没反应就
	if (asc === undefined) {
		asc = -1
	} else {
		asc = asc ? -1 : 1
	}
	return function (value1, value2) {
		let a = value1[property]
		let b = value2[property]
		return a < b ? asc : a > b ? asc * -1 : 0
	}
}
/**
 * 打开消息面板
 * @param type 类型，su***ess，info，warning，error
 * @param message 标题
 * @param description 备注
 * @param duration 弹出时间，默认3s
 */
export const showNotification = (type, message, description = '', duration = 3) => {
	notification[type]({
		message,
		description,
		duration
	})
}

// 文件处理工具end
export default tool

3. 查看 src/locales/lang/zh-***.js、src/locales/lang/en.js

import 'dayjs/locale/zh-***'

export default {
	***mon: {
		searchButton: '查询',
		resetButton: '重置',
		addButton: '增加',
		editButton: '编辑',
		removeButton: '删除',
		batchRemoveButton: '批量删除',
		detailButton: '详情',
		searchKey: '关键词',
		imports: '导入',
		more: '更多',
		export: '导出',
	},
	model: {
		user: '用户',
		org: '机构',
		pos: '职位',
		role: '角色',
		bizUser: '人员'
	},
	login: {
		signInTitle: '用户登录',
		forgetPassword: '忘记密码',
		signIn: '登录',
		signInOther: '其他登录方式',
		a***ountPlaceholder: '请输入账号',
		a***ountError: '请输入账号',
		PWPlaceholder: '请输入密码',
		PWError: '请输入密码',
		validLaceholder: '请输入验证码',
		validError: '请输入验证码',
		a***ountPassword: '账号密码',
		phoneSms: '手机号登录',
		phonePlaceholder: '请输入手机号',
		smsCodePlaceholder: '请输入短信验证码',
		getSmsCode: '获取验证码',
		machineValidation: '机器验证',
		sendingSmsMessage: '短信发送中',
		newPwdPlaceholder: '请输入新密码',
		backLogin: '返回登录',
		restPassword: '重置密码',
		emailPlaceholder: '请输入邮箱号',
		emailCodePlaceholder: '请输入邮件验证码',
		restPho***ype: '手机号找回',
		restEmailType: '邮箱找回',
        sysName: '管理'
	},
	user: {
		userStatus: '用户状态',
		resetPassword: '重置密码',
		role: '角色',
		batchExportButton: '批量导出',
		grantRole: '授权角色',
		grantResource: '授权资源',
		grantPermission: '授权权限',
		exportUserInfo: '导出信息',
		placeholderNameAndSearchKey: '请输入姓名或关键词',
		placeholderUserStatus: '请选择状态',
		popconfirmDeleteUser: '确定要删除吗？',
		popconfirmResatUserPwd: '确定要重置吗？'
	}
}

export default {
	***mon: {
		searchButton: 'search',
		resetButton: 'reset',
		addButton: 'add',
		editButton: 'edit',
		removeButton: 'delete',
		batchRemoveButton: 'batch Remove',
		detailButton: 'detail',
		searchKey: 'Search Key',
		imports: 'Import',
		more: 'More',
		export: 'Export',
	},
	model: {
		user: 'user',
		org: 'org',
		pos: 'pos',
		role: 'role',
		bizUser: 'bizUser'
	},
	login: {
		signInTitle: 'Sign in',
		forgetPassword: 'Forget password',
		signIn: 'Sign in',
		signInOther: 'Sign in with',
		a***ountPlaceholder: 'Please input a user a***ount',
		a***ountError: 'Please input a user a***ount',
		PWPlaceholder: 'Please input a password',
		PWError: 'Please input a password',
		validLaceholder: 'Please input a valid',
		validError: 'Please input a valid',
		a***ountPassword: 'A***ount Password',
		phoneSms: 'Phone SMS',
		phonePlaceholder: 'Please input a phone',
		smsCodePlaceholder: 'Please input a SMS code',
		getSmsCode: 'SMS code',
		machineValidation: 'Machine Validation',
		sendingSmsMessage: 'Sending SMS Message',
		newPwdPlaceholder: 'Please input a new password',
		backLogin: 'Back Login',
		restPassword: 'Rest Password',
		emailPlaceholder: 'Please input a email',
		emailCodePlaceholder: 'Please input a Email code',
		restPho***ype: 'For phone rest',
		restEmailType: 'For email rest',
		sysName: 'management'
	},
	user: {
		userStatus: 'User Status',
		resetPassword: 'Reset Password',
		role: 'Role',
		batchExportButton: 'Batch Export',
		grantRole: 'Grant Role',
		grantResource: 'Grant Resource',
		grantPermission: 'Grant Permission',
		exportUserInfo: 'Export UserInfo',
		placeholderNameAndSearchKey: 'Please enter your name or keyword',
		placeholderUserStatus: 'Please select status',
		popconfirmDeleteUser: 'Are you sure you want to delete it？',
		popconfirmResatUserPwd: 'Are you sure you want to reset？'
	}
}

二、配置页面

进入需要有翻译功能的页面进行配置，如 login.vue

1. HTML内容

<template>
	<div class="login_background">
		<div class="login_main">

            <!-- 配置小地球显示选择中英文翻译 -->
			<div class="login_config">
				<a-dropdown>
					<global-outlined />
					<template #overlay>
						<a-menu>
							<a-menu-item
								v-for="item in lang"
								:key="item.value"
								:***mand="item"
								:class="{ selected: config.lang === item.value }"
								@click="configLang(item.value)"
							>
								{{ item.name }}
							</a-menu-item>
						</a-menu>
					</template>
				</a-dropdown>
			</div>

            <!-- 配置登录表单 -->
			<div class="login-form">
				<a-card>
					<div class="login-header">
						<div class="logo">
                            <!-- 以下是通过sysBaseConfig动态获取图片和名称，此时名称是写死的并且需要中英翻译 -->
							<img :alt="sysBaseConfig.SNOWY_SYS_NAME" :src="sysBaseConfig.SNOWY_SYS_LOGO" />
<!--							<label>{{ sysBaseConfig.SNOWY_SYS_NAME }}</label>-->

                            <!-- 因为配置文件的login中写了sysNme属性，使用{{ $t('login.sysName') }}进行显示 -->
							<label>{{ $t('login.sysName') }}</label>
						</div>
					</div>

					<a-tabs v-model:activeKey="activeKey">


                        <!-- 以下使用到配置文件的login中a***ountPassword、a***ountPlaceholder、PWPlaceholder、validLaceholder、signIn字段实现中英文翻译 -->
						<a-tab-pane key="userA***ount" :tab="$t('login.a***ountPassword')">
							<a-form ref="loginForm" :model="ruleForm" :rules="rules">
								<a-form-item name="a***ount">
									<a-input
										v-model:value="ruleForm.a***ount"
										:placeholder="$t('login.a***ountPlaceholder')"
										size="large"
										@keyup.enter="login"
									>
										<template #prefix>
											<UserOutlined class="login-icon-gray" />
										</template>
									</a-input>
								</a-form-item>

								<a-form-item name="password">
									<a-input-password
										v-model:value="ruleForm.password"
										:placeholder="$t('login.PWPlaceholder')"
										size="large"
										auto***plete="off"
										@keyup.enter="login"
									>
										<template #prefix>
											<LockOutlined class="login-icon-gray" />
										</template>
									</a-input-password>
								</a-form-item>

								<a-form-item name="validCode" v-if="captchaOpen === 'true'">
									<a-row :gutter="8">
										<a-col :span="17">
											<a-input
												v-model:value="ruleForm.validCode"
												:placeholder="$t('login.validLaceholder')"
												size="large"
												@keyup.enter="login"
											>
												<template #prefix>
													<verified-outlined class="login-icon-gray" />
												</template>
											</a-input>
										</a-col>
										<a-col :span="7">
											<img :src="validCodeBase64" class="login-validCode-img" @click="loginCaptcha" />
										</a-col>
									</a-row>
								</a-form-item>

								<a-form-item>
									<a href="/findpwd" style="color: #0d84ff">{{ $t('login.forgetPassword') }}？</a>
								</a-form-item>
								<a-form-item>
									<a-button type="primary" class="w-full" :loading="loading" round size="large" @click="login"
										>{{ $t('login.signIn') }}
									</a-button>
								</a-form-item>
							</a-form>
						</a-tab-pane>
<!--						<a-tab-pane key="userSms" :tab="$t('login.phoneSms')" force-render>-->
<!--							<phone-login-form />-->
<!--						</a-tab-pane>-->
					</a-tabs>
				</a-card>
			</div>
		</div>
	</div>
</template>

2. JS内容

<script>
	import loginApi from '@/api/auth/loginApi'
	import phoneLoginForm from './phoneLoginForm.vue'
	import threeLogin from './threeLogin.vue'
	import smCrypto from '@/utils/smCrypto'
	import { required } from '@/utils/formRules'
	import { afterLogin } from './util'
	import config from '@/config'
	import configApi from '@/api/dev/configApi'
	import tool from '@/utils/tool'
	import { globalStore, iframeStore, keepAliveStore, viewTagsStore } from '@/store'
	import { mapActions, mapState } from 'pinia'

	export default {
		name: 'Login',
		***ponents: {
		},
		data() {
			return {
				activeKey: 'userA***ount',
				captchaOpen: config.SYS_BASE_CONFIG.SNOWY_SYS_DEFAULT_CAPTCHA_OPEN,
				validCodeBase64: '',
				ruleForm: {
					a***ount: '',
					password: '',
					validCode: '',
					validCodeReqNo: '',
					autologin: false
				},
				rules: {
					a***ount: [required(this.$t('login.a***ountError'), 'blur')],
					password: [required(this.$t('login.PWError'), 'blur')]
				},
				loading: false,

                // 添加中英文切换功能（实现小地球图标的显示与切换）
				config: {
					lang: tool.data.get('APP_LANG') || this.$CONFIG.LANG,
					theme: tool.data.get('APP_THEME') || 'default'
				},

                // 小地球图标切换语言功能选择
				lang: [
					{
						name: '简体中文',
						value: 'zh-***'
					},
					{
						name: 'English',
						value: 'en'
					}
				]

			}
		},
		***puted: {
			...mapState(globalStore, ['sysBaseConfig']),
		},
		watch: {
			'config.theme': function (val) {
				document.body.setAttribute('data-theme', val)
			},

            // 添加中英文切换功能的配置实现（html中config.lang === item.value）
			'config.lang': function (val) {
				this.$i18n.locale = val
				tool.data.set('APP_LANG', val)
			}
		},
		created() {
			this.clearViewTags()
			this.clearKeepLive()
			this.clearIframeList()
		},
		mounted() {
			let formData = ref(config.SYS_BASE_CONFIG)
			configApi.configSysBaseList().then((data) => {
				if (data) {
					data.forEach((item) => {
						formData.value[item.configKey] = item.configValue
					})
					this.captchaOpen = formData.value.SNOWY_SYS_DEFAULT_CAPTCHA_OPEN
					tool.data.set('SNOWY_SYS_BASE_CONFIG', formData.value)
					this.setSysBaseConfig(formData.value)
					this.refreshSwitch()
				}
			})
		},
		methods: {
			...mapActions(keepAliveStore, ['clearKeepLive']),
			...mapActions(viewTagsStore, ['clearViewTags']),
			...mapActions(iframeStore, ['clearIframeList']),
			...mapActions(globalStore, ['setSysBaseConfig']),
   
            // 点击语言后实现切换的方法，在HTML中@click="configLang(item.value)"
			configLang(key) {
				this.config.lang = key
			},

			// 通过开关加载内容
			refreshSwitch() {
				// 判断是否开启验证码
				if (this.captchaOpen === 'true') {
					// 加载验证码
					this.loginCaptcha()
					// 加入校验
					this.rules.validCode = [required(this.$t('login.validError'), 'blur')]
				}
			},
			// 获取验证码
			loginCaptcha() {
				loginApi.getPi***aptcha().then((data) => {
					this.validCodeBase64 = data.validCodeBase64
					this.ruleForm.validCodeReqNo = data.validCodeReqNo
				})
			},
			// 用户名密码登录
			async login() {
				this.$refs.loginForm.validate().then(async () => {
					this.loading = true
					const loginData = {
						a***ount: this.ruleForm.a***ount,
						// 密码进行SM2加密，传输过程中看到的只有密文，后端存储使用hash
						password: smCrypto.doSm2Encrypt(this.ruleForm.password),
						validCode: this.ruleForm.validCode,
						validCodeReqNo: this.ruleForm.validCodeReqNo
					}
					// 获取token
					try {
						const loginToken = await loginApi.login(loginData)
						await afterLogin(loginToken)
					} catch (err) {
						this.loading = false
						this.loginCaptcha()
					}
				})
			},
		}
	}
</script>

<!-- 引入该login页面的样式配置 -->
<style lang="less">
	@import 'login';
</style>

三、主要步骤

方法一

① 页面上添加小地球选择语言显示选项

<a-dropdown>
    <global-outlined />
    <template #overlay>
	    <a-menu>
			<a-menu-item
				v-for="item in lang"
			    :key="item.value"
				:***mand="item"
				:class="{ selected: config.lang === item.value }"
				@click="configLang(item.value)"
			>
				{{ item.name }}
			</a-menu-item>
		</a-menu>
    </template>
</a-dropdown>

② 实现添加的小地球功能

export default {
	data() {
		return {
			lang: [],

			config: {
                // lang 属性的值是通过 tool.data.get('APP_LANG') || this.$CONFIG.LANG 表达式获取的
                // 如果 tool.data.get('APP_LANG') 返回一个真值（非空、非undefined、非false等），则使用该值作为 lang 的值；否则，使用 this.$CONFIG.LANG 作为默认值。
				lang: tool.data.get('APP_LANG') || this.$CONFIG.LANG,

			}
		}
	},

    watch: {    // 当 config.lang 发生变化时，即语言设置发生变化时，触发绑定的回调函数

		'config.lang': function (val) {
            // 将新的语言设置应用到 $i18n 实例中，以改变应用程序的语言
			this.$i18n.locale = val
            // 将新的语言设置存储到 tool.data 中，以便在后续访问或导航到新页面时可以获取并应用语言设置
			tool.data.set('APP_LANG', val)
		}
	},
    methods: {
        // 更新 config.lang 的值
		configLang(key) {
			this.config.lang = key
		},
    }
}

③ 实现语言的切换选项显示

在上述 return {} 中的 lang: [] 填入数据

        lang: [
			{
				name: '简体中文',
				value: 'zh-***'
			},
			{
				name: 'English',
				value: 'en'
			}
		]

方法二

① 页面上添加小地球选择语言显示选项

<a-dropdown v-if="!ismobile" class="panel-item">
	<global-outlined />
	<template #overlay>
		<a-menu :selected-keys="lang">
			<a-menu-item key="zh-***" @click="handleIn18('zh-***')">
				<span>简体中文</span>
			</a-menu-item>
			<a-menu-item key="en" @click="handleIn18('en')">
				<span>English</span>
			</a-menu-item>
		</a-menu>
	</template>
</a-dropdown>

② 在methods中添加点击选项后的切换功能

data() {
	return {
		lang: [],
	}
},
methods: {
	// 设置多语言语种
	handleIn18(key) {
        // 将 this.lang 数据初始化为空数组
		this.lang = []
        // 将传入的 key 值添加到 this.lang 数组中，用于保存语言数据
		this.lang.push(key)
        // 将语言设置应用到 $i18n 实例中，以改变应用程序的语言
		this.$i18n.locale = key
        // 将语言设置存储到 this.$TOOL.data 中，使用键名 'APP_LANG' 来标识。这样可以将语言设置持久化，以便在后续访问或导航到新页面时可以获取并应用语言设置
		this.$TOOL.data.set('APP_LANG', key)
	},
}

四、多页面使用相同语言

在以上方法中都将使得所有的页面用同一种语言，因为：

方法一中

'config.lang': function (val) {
    // 将新的语言设置应用到 $i18n 实例中，以改变应用程序的语言
    this.$i18n.locale = val
    // 将新的语言设置存储到 tool.data 中，以便在后续访问或导航到新页面时可以获取并应用语言设置 
    tool.data.set('APP_LANG', val)         
}

方法二中

    // 将语言设置应用到 $i18n 实例中，以改变应用程序的语言
    this.$i18n.locale = key
    // 将语言设置存储到 this.$TOOL.data 中，使用键名 'APP_LANG' 来标识。这样可以将语言设置持久化，以便在后续访问或导航到新页面时可以获取并应用语言设置
    this.$TOOL.data.set('APP_LANG', key)

lang 语言选择列表：

注意：如果想要获取的 lang 语言数据列表一致，而不需要自己重新定义的话，可以在此基础上添加如下代码：

created() {
	// 获取默认语言，根据之前存储的语言设置或默认的语言设置来确定数组的内容
    // this.$TOOL.data.get('APP_LANG') 从 this.$TOOL.data 中获取键名为 'APP_LANG' 的值，即之前存储的语言设置。如果之前没有存储语言设置，这个表达式的结果将为 undefined
    // this.$CONFIG.LANG 是一个变量，表示默认的语言设置
    // this.lang 的初始化通过 new Array() 创建一个新的数组。数组内容是通过三元运算符 || 进行判断
    // 如果 this.$TOOL.data.get('APP_LANG') 有值，则使用它作为数组的唯一元素；否则，使用 this.$CONFIG.LANG 作为数组的唯一元素。
	this.lang = new Array(this.$TOOL.data.get('APP_LANG') || this.$CONFIG.LANG)
},

五、$t('') 无效

在一般情况下，只要在全局定义了 vue-i18（即配置了vue-i8），那么一般情况下是有用的，不管是哪种使用方式，如下两种示例：

<label>{{ $t('login.sysName') }}</label>
只是用label举例并不表示只有label有用

以下是 :tab、:placeholder 的举例
<a-tab-pane key="userA***ount" :tab="$t('login.a***ountPassword')">
<a-form ref="loginForm" :model="ruleForm" :rules="rules">
	<a-form-item name="a***ount">
		<a-input
			v-model:value="ruleForm.a***ount"
			:placeholder="$t('login.a***ountPlaceholder')"
			size="large"
			@keyup.enter="login"
		>
			<template #prefix>
				<UserOutlined class="login-icon-gray" />
			</template>
		</a-input>
	</a-form-item>
	<a-form-item name="password">
		<a-input-password
			v-model:value="ruleForm.password"
			:placeholder="$t('login.PWPlaceholder')"
			size="large"
			auto***plete="off"
			@keyup.enter="login"
		>
			<template #prefix>
				<LockOutlined class="login-icon-gray" />
			</template>
		</a-input-password>
	</a-form-item>
</a-form>

以上都属于正确演示，都是有效的，但是如果使用第二种方式，且直接用tab、:placeholder而没有加冒号 : 则失效，包括其他的比如 :title 等都要加 : 才有效。

原因：冒号“：”其实是v-bind的缩写，冒号后面绑定为变量，会动态变化的值；一般属性后面为常量。由于当前需要切换语言所以是动态的值绑定，需要冒号:或v-bind:才可变。

六、遍历List进行中英文切换

以下假设List集合中的字段为中文，英文的话更简单，就不举例了。

zh-***.js

	menu: {
		'系统首页': '系统首页',
		'个人中心' : '个人中心',
		'其他': '其他'
	}
如果集合中的数据是中文就写中文的字段并使用单引号，如果是英文就不要单引号

en.js

	menu: {
		'系统首页': 'System Home',
		'个人中心' : 'Personal Center',
		'其他': 'Other'
	}
如果集合中的数据是中文就写中文的字段并使用单引号，如果是英文就不要单引号

HTML中

<!-- v-for="shortcut in shortcutList" 遍历集合shortcutList中的每一个数据并将其对象命名为shortcut -->
<a-col :span="6" :key="shortcut.id" v-for="shortcut in shortcutList">
	<shortcutCard
		:icon="shortcut.icon ? shortcut.icon : 'menu-outlined'"

		:label="$t('menu.'+shortcut.title)"

		@click="leaveFor(shortcut.path)"
	/>
</a-col>
其中 :label="$t('menu.'+shortcut.title)" 即引入menu中变量shortcut.title的值的数据

显示效果如下（List中没有的数据不会显示，比如像上面说些的'其他'字段）：

所以应用主要是：

{{ $t('menu.' + shortcut.title) }}
或者
:title="$t('menu.' + shortcut.title)"

七、在HTML、JS中使用$t()

1、HTML中使用$t()

{{ $t('menu.title'}}
或者
:title="$t('menu.title')"

2、JS中使用$t()

使用 this 引用 $t() 即 this.$t() ，注意JS中的 属性 ：this.$t() 中属性是不需要冒号“:”的！！！

handleUser(key) {
    // 个人中心页面跳转
	if (key === 'uc') {
		router.push({ path: '/usercenter' })
	}

    // 点击清理缓存
	if (key === 'clearCache') {
		this.$confirm({
            // 提示
			title: this.$t('login.info'),
            // 提示内容
			content: this.$t('login.delCache'),
			icon: createVNode(ExclamationCircleOutlined),
			maskClosable: false,
            // 确认按钮
			okText: this.$t('button.sure'),
            // 取消按钮
			cancelText: this.$t('button.cancel'),
			onOk() {
				message.loading('正在清理中...', 1)
				tool.data.clear()
				setTimeout(() => {
					router.replace({ path: '/login' })
					location.reload()
				}, 100)
			},
			onCancel() {}
		})
	}

    // 退出登录
	if (key === 'outLogin') {
		this.$confirm({
            // 提示
			title: this.$t('login.info'),
            // 提示内容
			content: this.$t('login.logoutMessage'),
			icon: createVNode(ExclamationCircleOutlined),
			maskClosable: false,
            // 确认按钮
			okText: this.$t('button.sure'),
            // 取消按钮
			cancelText: this.$t('button.cancel'),
			onOk() {
				// 取得缓存中的token
				const token = tool.data.get('TOKEN')
				const param = {
					token: token
				}
				message.loading('退出中...', 1)
				loginApi
					.logout(param)
					.then(() => {
						// message.c
						// 清理掉个人的一些信息
						tool.data.remove('TOKEN')
						tool.data.remove('USER_INFO')
						tool.data.remove('MENU')
						tool.data.remove('PERMISSIONS')
						router.replace({ path: '/login' })
					})
					.catch(() => {
						tool.data.clear()
						router.replace({ path: '/login' })
						location.reload()
					})
			},
			onCancel() {}
		})
	}
},

以下是调用 handleUser 方法的HTML：

<a-menu>
<a-menu-item key="uc" @click="handleUser('uc')">
	<UserOutlined style="margin-right: 8px" />
	<span>{{ $t('index.userCenter') }}</span>
</a-menu-item>
<a-menu-item key="clearCache" @click="handleUser('clearCache')">
	<loading3-quarters-outlined style="margin-right: 8px" />
	<span>{{ $t('index.cleanCache') }}</span>
</a-menu-item>
<a-menu-divider />
<a-menu-item key="outLogin" @click="handleUser('outLogin')">
	<export-outlined style="margin-right: 8px" />
	<span>{{ $t('index.logout') }}</span>
</a-menu-item>
</a-menu>

效果如图：

3、JS里的HTML部分中使用$t()

renderAlert() {
	// 绘制统计列数据
	// eslint-disable-next-line no-unused-vars
	const needTotalItems = this.needTotalList.map((item) => {
		return (
			<span className="mr-3">
						{item.title} 总计{' '}
				<a className="font-6">{!item.customRender ? item.total : item.customRender(item.total)}</a>
					</span>
		)
	})

	// 绘制 清空 按钮
	// eslint-disable-next-line no-unused-vars
	const clearItem =
		typeof this.alert === 'boolean' && this.alert
			? this.renderClear(this.clearSelected)
			: typeof this.alert.clear === 'function'
				? this.renderClear(this.alert.clear)
				: null

	// 绘制 alert 组件
	if (alert) {
		const message = (
			<div>
						<span className="mr-3">
							已选择 : <a className="font-6">{this.selectedRows.length}</a>
						</span>
				{needTotalItems}
				{clearItem}
			</div>
		)
		return <a-alert showIcon class="mb-4" message={message} />
	}
},

renderClear(callback) {
	if (this.selectedRowKeys.length <= 0) return null
	return (
		<a
			className="ml-6"
			onClick={() => {
				callback()
				this.clearSelected()
			}}>
			{' '}
			清空{' '}
		</a>
	)
},

切换多语言，修改代码：

renderClear(callback) {
	if (this.selectedRowKeys.length <= 0) return null
	return (
		<a
			className="ml-6"
			onClick={() => {
				callback()
				this.clearSelected()
			}}>
			{' '}
            <!-- 修改了此处 -->
			{ this.$t('button.clean') }{' '}
		</a>
	)
},
renderAlert() {
	// 绘制统计列数据
	// eslint-disable-next-line no-unused-vars
	const needTotalItems = this.needTotalList.map((item) => {
		return (
			<span className="mr-3">
						{item.title} 总计{' '}
				<a className="font-6">{!item.customRender ? item.total : item.customRender(item.total)}</a>
					</span>
		)
	})
	// 绘制 清空 按钮
	// eslint-disable-next-line no-unused-vars
	const clearItem =
		typeof this.alert === 'boolean' && this.alert
			? this.renderClear(this.clearSelected)
			: typeof this.alert.clear === 'function'
				? this.renderClear(this.alert.clear)
				: null
	// 绘制 alert 组件
	if (alert) {
		const message = (
			<div>
						<span className="mr-3">
                            <!-- 修改了此处 -->
							{ this.$t('table.selected') } : <a className="font-6">{this.selectedRows.length}</a>
						</span>
				{needTotalItems}
				{clearItem}
			</div>
		)
		return <a-alert showIcon class="mb-4" message={message} />
	}
},

4、对antd的<s-table>表头国际化i18n使用$t()

原始表格HTML：

<s-table
    ref="table"
    :columns="columns"
    :data="loadData"
    :alert="options.alert.show"
    bordered
    :row-key="(record) => record.id"
    :tool-config="toolConfig"
    :row-selection="options.rowSelection"
>

<template #operator class="table-operator">
  <a-space>
    <a-button type="primary" @click="formRef.onOpen()" v-if="hasPerm('sysSeriesAdd')">
      <template #icon><plus-outlined /></template>
      {{ $t('button.add') }}
    </a-button>
    <xn-batch-delete
        v-if="hasPerm('sysSeriesBatchDelete')"
        :selectedRowKeys="selectedRowKeys"
        @batchDelete="deleteBatchSysSeries"
    />
  </a-space>
</template>
<template #bodyCell="{ column, record }">
  <template v-if="column.dataIndex === 'picUrl'">
    <img :src="record.picUrl" alt="图片" style="width: 80px; height: 100px">
  </template>
  <template v-if="column.dataIndex === 'isOver'">
    {{ $TOOL.dictTypeData('***MON_YES_OR_NO', record.isOver) }}
  </template>
  <template v-if="column.dataIndex === 'online'">
    {{ $TOOL.dictTypeData('***MON_YES_OR_NO', record.online) }}
  </template>
  <template v-if="column.dataIndex === 'action'">
    <a-space>
      <a @click="batchBind(record)" v-if="hasPerm('sysSeriesBind')">{{ $t('button.bind') }}</a>
      <a-divider type="vertical" v-if="hasPerm(['sysSeriesBind'], 'and')" />
      <a @click="formRef.onOpen(record)" v-if="hasPerm('sysSeriesEdit')">{{ $t('***mon.editButton') }}</a>
      <a-divider type="vertical" v-if="hasPerm(['sysSeriesEdit', 'sysSeriesDelete'], 'and')" />
      <a-popconfirm :title="$t('user.popconfirmDeleteUser')" @confirm="deleteSysSeries(record)">
        <a-button type="link" danger size="small" v-if="hasPerm('sysSeriesDelete')">{{ $t('button.delete') }}</a-button>
      </a-popconfirm>
    </a-space>
  </template>
</template>

</s-table>

对表头以数组形式定义：

	const columns = [
		{
			title: '剧名',
			dataIndex: 'name'
		},
		{
			title: '总集数',
			dataIndex: 'totalVideo'
		},
		{
			title: '是否完结',
			dataIndex: 'isOver'
		},
		{
			title: '封面图',
			dataIndex: 'picUrl',
		},
		{
			title: '扩展信息',
			dataIndex: 'extJson',
			ellipsis: true
		},
		{
			title: '是否上架',
			dataIndex: 'online'
		},
		{
			title: '创建时间',
			dataIndex: 'createTime'
		},
		{
			title: '创建用户',
			dataIndex: 'createrName'
		}
	]

因为JS部分使用的是setup，并不是export default，在其中引用 $t 或者 this.$t 都报错，找不到 $t，所以国际化之后需要引入i18n，不是内部下载的vue-i18n：import { useI18n } from "vue-i18n";，而是自己编写的配置：import i18n from '@/locales';，

如图：再：const { t } = i18n.global;，

代码如下：

<script setup name="xxx">

  // 从 @/locales 中导入一个名为 i18n 的对象(locales 文件用于处理国际化（i18n）相关的配置和逻辑)
  import i18n from '@/locales'

  // 从 i18n.global 对象中解构赋值一个名为 t 的变量
  // t 是一个函数或方法，用于国际化文本的翻译
  // i18n.global 是一个全局的 i18n 实例，包含了初始化和配置的信息。
  const { t } = i18n.global

  // 测试，刷新是识别到语言并进行打印
  console.log("打印出：", t('model.user'))
</script>

切换后刷新如下图：

由于以上方法只能在页面刷新是获取到当前语言，所以需要在切换语言是进行页面刷新：

<a-dropdown>
  <global-outlined />
  <template #overlay>
    <a-menu :selected-keys="lang">
      <a-menu-item key="zh-***" @click="handleIn18('zh-***')">
        <span>简体中文</span>
      </a-menu-item>
      <a-menu-item key="en" @click="handleIn18('en')">
        <span>English</span>
      </a-menu-item>
    </a-menu>
  </template>
</a-dropdown>

    // 设置多语言语种
    handleIn18(key) {
      this.lang = []
      this.lang.push(key)
      this.$i18n.locale = key
      this.$TOOL.data.set('APP_LANG', key)
    
      // 页面刷新
      window.location.reload()
    },

之后的使用直接 t('xxx.xxx') 即可：

  const columns = [
    {
      title: t('table.seriesName'),
      dataIndex: 'name',
    },
    {
      title: t('table.allPlay'),
      dataIndex: 'totalVideo'
    },
    {
      title: t('table.isOver'),
      dataIndex: 'isOver'
    },
    {
      title: t('table.image'),
      dataIndex: 'picUrl',
    },
    {
      title: t('form.expand'),
      dataIndex: 'extJson',
      ellipsis: true
    },
    {
      title: t('table.isOn'),
      dataIndex: 'online'
    },
    {
      title: t('table.createTime'),
      dataIndex: 'createTime'
    },
    {
      title: t('table.createUser'),
      dataIndex: 'createrName'
    }
  ]

将判断部分也进行修改：

<template #bodyCell="{ column, record }">
  <template v-if="column.dataIndex === 'picUrl'">
    <img :src="record.picUrl" alt="图片" style="width: 80px; height: 100px">
  </template>

  <template v-if="column.dataIndex === 'isOver'">
    <div v-if="record.isOver === 'YES'">{{ $t('table.yes') }}</div>
    <div v-else>{{  $t('table.no') }}</div>
  </template>
  <template v-if="column.dataIndex === 'online'">
    <div v-if="record.online === 'YES'">{{ $t('table.yes') }}</div>
    <div v-else>{{  $t('table.no') }}</div>
  </template>

</template>

5、关于setup函数中的i18n的使用

即第4点antd中描述的那样：

// 引入自己配置的关于i18n的文件夹
import i18n from "@/locales";
const { t } = i18n.global

之后所有的需要 $t 或者 this.$t 的地方都使用 t 即可。