vue3中使用i18n实现中英文切换，引入封装+全局切换

最新推荐文章于 2025-05-29 15:35:02 发布

布克吉

最新推荐文章于 2025-05-29 15:35:02 发布

阅读量1.7k

点赞数 4

CC 4.0 BY-SA版权

文章标签： vue.js javascript ecmascript

本文链接：https://blog.csdn.net/weixin_57798646/article/details/140946545

前言

名称由来：全称是 internationalization，插件名取了首字母 i 和尾字母 n，中间一共有 18 个字母，所以组合起来就叫 i18n。

作用：通过手动配置多种语言的翻译，且可快速切换。

正文开始↓

1.安装

npm install vue-i18n@9

这里是vue3使用，若使用vue2可 vue-i18n@8

2.引入

新建一个文件i18n.js，可以与main.js同级，引入i18n

import { createI18n } from 'vue-i18n';
import en from './lang/lang-en.js';
import zh from './lang/lang-zh_CN.js';

const i18n = createI18n({
  locale: navigator.language.slice(0, 2) || 'en', // 默认语言，可以根据浏览器语言自动设置
  fallbackLocale: 'en', // 如果当前选择的语言没有对应的翻译，则回退到这个语言
  messages: {
    en: en,
    zh: zh,
  },
});

export default i18n;

上述中的，./lang/lang-en.js 和 ./lang/lang-zh_CN.js便是我们配置中英文切换的文件，示例：

export default{
    LP:{
		username:' User name ',
		password:' Password ',
		verificationcode:' Verification code ',
		rememberPwd:' Remember passwords ',
		login:' Log in '
    }
}

export default{
    LP:{
		username:'用户名',
		password:'密码',
		verificationcode:'验证码',
		rememberPwd:'记住密码',
		login:'登录'
    }
}

main.js中注册挂载

import i18n from './i18n.js'

app.use(i18n).mount('#app')

3.页面中使用

html

$t 是一个全局方法，传递一个参数，这个参数通常是需要翻译的文本的键名

<el-form-item prop="username">
    <el-input class="user" :placeholder="$t('LP.username')" type="text" autocomplete="off" />
</el-form-item>
<el-form-item prop="password">
    <el-input class="password" :placeholder="$t('LP.password')" type="password" autocomplete="off" />
</el-form-item>

此处使用global，是为了全局切换语言时可以实时变化

import i18n from '../i18n.js'

ElMessage.success(i18n.global.t('LP.loginSuccessfully'))

4.切换语言

import i18n from '../i18n.js'

//可在任意页面使用自定义函数进行切换
i18n.global.locale = 'zh';
//或
i18n.global.locale = 'en';