国际化

安装国际化插件

npm i vue-i18n -S

npm i vue-i18n -S

main.js注册使用vue-i18n

import i18n from './i18n'
app.use(i18n)

import i18n from './i18n'
app.use(i18n)

在src下创建文件夹i8n

i18n>index.js

import {createI18n} from 'vue-i18n'
import zh from './zh.js'
import en from './en.js'
const messages = {
    en,zh
}
const i18n = createI18n({
    legacy: false,//版本为vue3，在传统模式下报错，所以要false
    locale: localStorage.getItem('lang') || 'zh', // 设置默认语言为中文
    messages
})
export default i18n

import {createI18n} from 'vue-i18n'
import zh from './zh.js'
import en from './en.js'
const messages = {
    en,zh
}
const i18n = createI18n({
    legacy: false,//版本为vue3，在传统模式下报错，所以要false
    locale: localStorage.getItem('lang') || 'zh', // 设置默认语言为中文
    messages
})
export default i18n

i18n>zh.js

export default {
    messages:{
        menu1:'菜单一',
        menu2:'菜单二',
        menu3:'菜单三',
        menu4:'菜单四',
    }
}

export default {
    messages:{
        menu1:'菜单一',
        menu2:'菜单二',
        menu3:'菜单三',
        menu4:'菜单四',
    }
}

i18n>en.js

export default {
    messages:{
        menu1:'menu1',
        menu2:'menu2',
        menu3:'menu3',
        menu4:'menu4',
    }
}

export default {
    messages:{
        menu1:'menu1',
        menu2:'menu2',
        menu3:'menu3',
        menu4:'menu4',
    }
}

使用

<span>{{ $t('messages.menu1') }}</span> //正常是使用这种
<span v-t="'messages.menu1'"></span> //这种事v-if条件判断

<span>{{ $t('messages.menu1') }}</span> //正常是使用这种
<span v-t="'messages.menu1'"></span> //这种事v-if条件判断

国际化 ​

国际化