Vue3使用i18n国际化

不知道起啥名啊啊

已于 2023-11-14 19:57:07 修改

阅读量243

点赞数 2

分类专栏： Vue3 文章标签： vue.js

于 2023-11-14 19:56:26 首次发布

本文链接：https://blog.csdn.net/weixin_57660141/article/details/134406356

版权

Vue3 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

安装

npm install vue-i18n@next

创建i18n文件夹

我这个项目是中、俄语言切换

zh.ts里放中文语言下要显示的字段，rn.ts里放俄语要显示的字段

index.ts

import { createI18n } from 'vue-i18n';
import ZH from './zh.js';
import RN from './rn.js';
const messages = {
  zh: { ...ZH  },
  rn: { ...RN  },
};


const i18n = createI18n({
  legacy: false,// 如果要支持compositionAPI，此项必须设置为false;
  globalInjection: true,// 全局注册$t方法
  locale: localStorage.getItem('lang') || 'zh',  // 设置当前语言类型
  messages
});


export default i18n;

main.ts中引入

import i18n from '@/i18n/index';

app.use(i18n);

使用

在页面中引入

使用t('字段名') 或$t('字段名')渲染，locale为当前语言

import { useI18n } from "vue-i18n";
const { t,locale}  = useI18n()

模版中渲染----使用$t('字段名')渲染

<div class="itemCol">
    <div class="itemCol__title">{{ $t('huoqubangzhu') }}</div>
    <RouterLink to="/contact" class="itemCol__option">{{ $t('lianxiwomen') }}</RouterLink>
    <RouterLink to="/support" class="itemCol__option">{{ $t('zhichizhongxin') }}</RouterLink>
</div>

切换语言需要修改locale的值