vite + vue3中使用vue-i18n国际化插件_vue3 vite i18n

1. 安装

npm install vue-i18n@9
1

2. 配置

2.1 src下新建lang文件夹，lang文件下创建对应语言文件

如：en.ts

export default {
  common: {
    input_placeholder: 'Please Input',
    select_placeholder: 'Please Select',
    search: 'Search',
    reset: 'Reset',
    edit: 'Edit',
    delete: 'Delete',
    delete_tip: 'Are you sure to delete this?',
    confirm: 'Confirm',
    cancel: 'Cancel'
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13

zh.ts

export default {
  common: {
    input_placeholder: '请输入',
    select_placeholder: '请选择',
    search: '查询',
    reset: '重置',
    edit: '编辑',
    delete: '删除',
    delete_tip: '确认删除？',
    confirm: '确定',
    cancel: '取消'
  },
}
1
2
3
4
5
6
7
8
9
10
11
12
13

创建index.ts，这里使用pinia管理全局lang语言

import { createI18n } from 'vue-i18n';
import { createPinia } from 'pinia';
import en from './en'
import zh from './zh';
import SettingsStore from '@/store/settings';

const settings = SettingsStore(createPinia())
export const i18n = createI18n({
  locale: settings.lang,
  // fallbackLocale: 'en',
  legacy: false, // Composition API 模式
  globalInjection: true, // 全局注册 $t方法
  messages: {
    en: en,
    zh: zh
  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

2.2 main.ts中注册i18n

import { i18n } from '@/i18n';

app..use(i18n).mount('#app')
1
2
3

3 .vue对应的页面中使用

<a-button type="text" danger>{{$t('common.delete')}}</a-button>
1

4 .ts对应的文件中使用

import {  i18n } from '@/i18n'
const { t } = i18n.global

export const nav = [
  {
    title: t('nav.shop.shop_management'),
    icon: 'power',
    children: [
      {
        title: t('nav.shop.account_list'),
        path: 'account-list'
      },
    ]
  },
]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15