Use vue-i18n no projeto vue para realizar a função de comutação multilíngue
No projeto, é necessário realizar a função de comutação multilíngue. Existem muitas maneiras de realizá-la. A seguir, apresentaremos o uso do vue-i18n para realizá-la.
Documentação de referência do Vue I18n
1. Instale o pacote de dependência vue-i18n
npm install --save vue-i18n
2. Configure os arquivos zh-CN e en-US
Configure os arquivos em chinês e inglês que precisam ser alternados entre zh-CN.json e en-US.json em api/languages
// zh-CN.json
{
"langName": "中文",
"menuList": {
"home": "主页",
"user": "用户管理",
"roles": "角色管理",
"notice": "通知公告",
"logs": "日志管理"
}
}
// en-US.json
{
"langName": "en-US",
"menuList": {
"home": "Home",
"user": "User management",
"roles": "Role management",
"notice": "Notice Announcement",
"logs": "log management"
}
}
3. Monte globalmente o plug-in i18n em main.js
Faça uma importação global em main.js, observe: importe o arquivo de recurso correto
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
const i18n = new VueI18n({
locale: 'zh-CN', // 将要切换的语言，可以通过url拼的参数获取，用户行为select选择获取，本地manifest配置获取等，根据场景动态获取
messages: {
'zh-CN': require('./api/languages/zh-CN.json'), // 本地资源文件，我这里配2个语言，中文&英文，src下根据个人情况放置
'en-US': require('./api/languages/en-US.json')
}
});
const vm = new Vue({
el: '#app',
i18n,
store,
router,
render: c => c(App),
});
4. Use na página
// template中直接使用
<template>
<div class="menuWrap">
<div class="menuInner">
{
{
$t('menuList.home') }}
</div>
<div class="menuInner">
{
{
$t('menuList.user') }}
</div>
<div class="menuInner">
{
{
$t('menuList.roles') }}
</div>
</div>
</template>
// script中直接使用
<script>
export default {
data () {
return {
langName: '',
}
},
created () {
this.langName = this.$t('langName')
}
}
</script>
5. Mudança de idioma
<template>
<div class="langWrap">
<div class="langInner" @click="handleCh">
中文
</div>
<div class="langInner" @click="handleEn">
英文
</div>
</div>
</template>
<script>
export default {
data () {
return {
langName: '',
}
},
methods: {
handleCh() {
this.$i18n.locale = 'zh-CN'
},
handleEn() {
this.$i18n.locale = 'en-US'
},
}
}
</script>
Finalmente: Se a instalação do vue-i18n no npm for bem-sucedida, mas às vezes houver um erro de Cannot read properties of undefined (reading 'install') ao citar , você pode consultar meu outro artigo: Solving the problem of using vue- i18n em projetos vue erro i18n Não é possível ler as propriedades do problema indefinido (ler 'instalar')