Vue3-- i18n国际化

1、安装

npm install vue-i18n

安装成功之后显示：

  

2、在项目的utils文件夹下，建一个文件夹lang，用来存放和国际化相关的代码文件。

注意如果用的是typescript，要将文件后缀由.js改为.ts

 i18n.js：配置i18n

import { createI18n } from 'vue-i18n'

// 引入各个语言配置文件: 定义对应几种语言的展示内容
import zh from './zh/index'
import en from './en/index'

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

export default i18n

zh/index.js:

export default {
    message: {
        homeText: '主页',
        mineText: '个人中心'
    }
}

en/index.js:

export default {
    message: {
        homeText: 'HOME',
        mineText: 'MY'
    }
}

3、项目中将i18n挂载到实例上

main.js：

import i18n from './utils/lang/i18n'


const app = createApp(App)
app.use(i18n)

4、组件中使用，点击按钮切换语言

i18nTest.vue

<template>
    <p>{{ t('message.homeText') }}</p>
    <el-button @click="toggle('zh')">点击切换中文</el-button>
    <el-button @click="toggle('en')">点击切换英文</el-button>
</template>
<script setup>
import { useI18n } from 'vue-i18n'

const { t } = useI18n()
// 核心思想就是改变useI18n解构出来的locale
const { locale: i18nLanguage } = useI18n()

const toggle = language => {
    i18nLanguage.value = language // zh en
}
</script>

5、如果控制台出现以下警告：

 翻译：您正在运行 vue-i18n 的 esm-bundler构建。建议将您的捆绑器配置为使用布尔文字显式替换功能标志全局变量，以便在最终捆绑包中进行适当的节点树。

解决方法：

在vite.config.js文件中加入这条才能解决，"vue-i18n": "vue-i18n/dist/vue-i18n.cjs.js"。