目录
前言
名称由来:全称是 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>
js
此处使用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';