Vue3+Ts i18n实现国际化-摩杜云开发者社区

1、下载依赖

npm install vue-i18n@nex

2、在src目录下创建文件夹创建文件 index.ts 、 zh/index.ts 、en/index.ts

// index.ts
import { createI18n } from 'vue-i18n'
import zh from './zh/index'
import en from './en/index'

const messages = {
  en,
  zh,
}

console.log('localStorage.getItem', localStorage.getItem('language'));

const language = (navigator.language || 'en').toLocaleLowerCase() // 获取浏览器的语言
console.log('language.split', language.split('-')[0]);

const i18n = new createI18n({
  locale: localStorage.getItem('language') || language.split('-')[0] || 'en', // 先从缓存里拿，没有的话就用浏览器语言，
  fallbackLocale: 'zh', // 设置备用语言
  messages,
  legacy: false,
  globalInjection:true,

})

export default i18n

3、 en/index.ts

// en/index.ts
export default {
  'result.success.title': 'Submission Success',
  'result.success.description':
    'The submission results page is used to feed back the results of a series of operational tasks. If it is a simple operation, use the Message global prompt feedback. This text area can show a simple supplementary explanation. If there is a similar requirement for displaying “documents”, the following gray area can present more complicated content.',
  'result.success.operate-title': 'Project Name',
  'result.success.operate-id': 'Project ID',
  'result.success.principal': 'Principal',
  'result.success.operate-time': 'Effective time',
  'result.success.step1-title': 'Create project',
  'result.success.step1-operator': 'Qu Lili',
  'result.success.step2-title': 'Departmental preliminary review',
  'result.success.step2-operator': 'Zhou Maomao',
  'result.success.step2-extra': 'Urge',
  'result.success.step3-title': 'Financial review',
  'result.success.step4-title': 'Finish',
  'result.success.btn-return': 'Back List',
  'result.success.btn-project': 'View Project',
  'result.success.btn-print': 'Print'
}

4、 zh/index.ts

// zn/index.ts

export default {
  'result.success.title': '提交成功',
  'result.success.description':
    '提交结果页用于反馈一系列操作任务的处理结果， 如果仅是简单操作，使用 Message 全局提示反馈即可。 本文字区域可以展示简单的补充说明，如果有类似展示 “单据”的需求，下面这个灰色区域可以呈现比较复杂的内容。',
  'result.success.operate-title': '项目名称',
  'result.success.operate-id': '项目 ID',
  'result.success.principal': '负责人',
  'result.success.operate-time': '生效时间',
  'result.success.step1-title': '创建项目',
  'result.success.step1-operator': '曲丽丽',
  'result.success.step2-title': '部门初审',
  'result.success.step2-operator': '周毛毛',
  'result.success.step2-extra': '催一下',
  'result.success.step3-title': '财务复核',
  'result.success.step4-title': '完成',
  'result.success.btn-return': '返回列表',
  'result.success.btn-project': '查看项目',
  'result.success.btn-print': '打印'
}

5、main.ts

// main.ts
import i18n from './i18n/index';
function vawBoot() {
  const app = createApp(App)
  app.use(i18n)
  app.mount('#app')
}

6、使用

// 使用方式
index.vue
<template>

<div>

　　<n-select
   　　 size="small"
   　　 style="width: 120px;"
   　　 v-model:value="optionsValue"
   　　 :options="options"
   　　 @update:value="handleUpdateValue"/>
　　<div>
 　　 {{ $t('result.success.title') }}　　
　　</div>

</div>

</template>

<script setup lang="ts">
import { useI18n } from 'vue-i18n'

const { t } = useI18n()  // 国际化

const langOptions = ref([
  {label: "English", value: 'en'},
  {label: "中文", value: 'zn'},
])
const optionsValue = ref(localStorage.getItem('language'))

function handleUpdateValue(lang) {
  console.log(lang)
  localStorage.setItem("language", lang);
  window.location.reload();
}

</script>