vue3 中如何使用 vue-i18n
vue3 中如何使用 vue-i18n
·
下载vue3版本的vue-i18n
npm install vue-i18n -S
//or
cnpm i vue-i18n -S
//or
yarn add vue-i18n
当前使用的版本 "vue-i18n": "^9.1.6"
i18n 文件下的 index.js
zh , en , 分别为两种语言文件 格式为(json) 中文 和 英文
en:
{
"header": {
"chat": "chat"
}
}
zh:
{
"header": {
"chat": "聊天"
}
}
import { createI18n } from 'vue-i18n';
const i18n = createI18n({
// 默认语言
locale: 'zh',
// 关闭控制台警告
silentFallbackWarn: true,
// 设置语言环境
messages: {
'en': require('./en.json'),
'zh': require('./zh.json')
}
});
export default i18n;
在入口(main)文件引入 i18n
import i18n from './i18n/config';
App.use(i18n);
切换语言以及使用
import { useI18n } from "vue-i18n";
const { locale } = useI18n();
<p>{{ $t('header.chat') }}</p>
<p>{{ t('header.chat') }}</p>
<button @click="handleZh ('zh')">中文</button>
<button @click="handleEn ('en')">英文</button>
setup() {
// 中文
const handleZh = (val) => {
locale.value = val;
};
// 英文
const handleEn = (val) => {
locale.value = val;
};
return {
handleZh,
handleEn
};
}
更多推荐
已为社区贡献1条内容
所有评论(0)