Vue3项目之i18n实现网站全局国际化

实现网站全局国际化

下载依赖：npm install vue-i18n@next

在 src 下新建 language 文件夹

新建 i18n.ts 、zn.ts、en.ts

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

// zn.ts

export default {
    message: {
        name: '陈'
        sex: '男'
    }
}

// en.ts

export default {
    message: {
        name: 'cocoon'
        sex: '女'
    }
}

配置 main.ts

// 语言配置
import i18n from '@/language/i18n'
app.use(i18n)

组件中使用

<script setup lang="ts">
import { useI18n } from 'vue-i18n'

const { t, locale } = useI18n()

// 改变语言
function changeLan(lan: string) {
    locale.value = lan
}

</script>

<template>
    <button @click="changeLan('zh')">中文</button>
    <button @click="changeLan('en')">英文</button>

    <h1>{{ t('header.orders') }}</h1>
</template>