在vue3项目中简单使用多语言插件vue-i18n

更多用发参考vue-i18n官方网站vue-i18n.intlify.dev/guide/

安装

# pnpm add vue-i18n

在src目录下创建i18n目录, 在i18n下面创建 index.js, zh-CN.js, en-US.js文件,内容分别如下

index.js

import { createI18n } from 'vue-i18n'
import zh_CN from './zh-CN.js'
import en_US from './en-US.js'

const messages = {
    'zh-CN': zh_CN,
    'en-US': en_US
}

const i18n = createI18n({
    locale: navigator.language ?? 'en-US',
    fallbackLocale: 'en-US',
    legacy:false,
    warnHtmlMessage: false,
    messages
})

export default i18n

zh-CN.js

export default {

    lang: {
        down: '保存',
        copy: '复制',
        name:'我叫{0},年芳{1}'
        }
}

en-US.js

export default {

    lang: {
        down: 'save',
        copy: 'copy',
        name:'my name is {0},i am {1}'
        }
}

main.js中加入两行

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

在.vue文件的使用

//<script setup>中使用时先引入并结构
import { useI18n } from 'vue-i18n'
const { t } = useI18n()

//再使用
cost down = ('lang.down')

//<template>中使用,如果script中不使用无需import useI18n
//普通显示
    <div>{{ $t('lang.down') }}</div>
    
//属性绑定
    <p :title="$t('title.down')">
    
//变量拼接
    <a :title="$t('lang.' + item)">{{ $t('lang.down') }}</a>

在普通js中使用

//先引入
import i18n from "@/i18n/index"

//再使用
const down = i18n.global.t('lang.down');

//也可以获取整个lang对象
const lang = i18n.global.tm('lang');

//占位符的使用
const name = i18n.global.t('lang.name',['翠花',28]); //我叫翠花,年芳28