项目使用vue-i18n实现 国际化

1
npm  i vue-i18n@next

在src下新建/language/i18n.ts文件 以及对应的语言文件zh.ts和en.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
import { createI18n } from 'vue-i18n'
import zh from './zh'
import en from './en'

const i18n = createI18n({
    legacy: false,
    locale: 'zh',
    messages: {
        zh,
        en
    }
})

export default i18n
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//zh
export default {
   footer: {
        yu2Travel: '玉玉游',
        discovery: '发现',
        rent: '出租',
        customerService: '客服',
    }
} 
//en
export default {
  footer: {
        yu2Travel: 'Yu2Travel',
        discovery: 'Discovery',
        rent: 'Rent',
        customerService: 'Customer Service',
    }
}

main.ts 挂载

1
2
import i18n from './language/i18n'
app.use(i18n)

使用

1
2
3
4
5
6
7
8
9
10
import { useI18n } from 'vue-i18n'

const {t} = useI18n()
//templa
  {{ t('footer.yu2Travel')}}

const {locale}=useI18n()
//定义函数修改值为en或zh
locale.value = en/zh

在v-for中使用

1
2
3
4
5
6
7
8
9
10
11
12
13
const footerMenu = reactive([{
        title: 'yu2Travel',
    },{
	    title: 'discovery',
    },{
        title: 'rent',
    },{
        title: 'customerService',
    }])
//footerMenu数组中,名称要和 en/zh文件中的名称对称
<li v-for="(item, i) in footerMenu" :key="i">
 	<h4>{{ t(`footer['${item.title}']`) }}</h4>
 </li>