1. 安装
npm install vue-i18n@9
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'
}
}
zh.ts
export default {
common: {
input_placeholder: '请输入',
select_placeholder: '请选择',
search: '查询',
reset: '重置',
edit: '编辑',
delete: '删除',
delete_tip: '确认删除?',
confirm: '确定',
cancel: '取消'
},
}
创建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,
legacy: false,
globalInjection: true,
messages: {
en: en,
zh: zh
}
})
2.2 main.ts中注册i18n
import { i18n } from '@/i18n';
app..use(i18n).mount('#app')
3 .vue对应的页面中使用
<a-button type="text" danger>{{$t('common.delete')}}</a-button>
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'
},
]
},
]