安装

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的值