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) useAppPinia(app) useAppRouter(app) useGlobalComponents(app) useRouterGuard() app.use(i18n) app.mount('#app') app.use(naive) }
6、使用
// 使用方式 index.vue <template> <div> {{ $t('result.success.title') }} </div> </div> </template> <script setup lang="ts"> import { useI18n } from 'vue-i18n' const { t } = useI18n() // 国际化 </script>
标签:index,success,title,Ts,ts,result,Vue3,i18n From: https://www.cnblogs.com/sundayRain/p/18167211