vue3中使用vue-i18n

1.先在项目中下载vue-i18n

npm install vue-i18n@9.6.2

2.1 .为了结构清晰，在src目录下创建一个lang文件夹

2.2 . 在lang文件夹分别下创建两个文件：en.js    /    zh.js代表两种语言

en.js:

export default {
  message: {
      hello: 'hello,world',
      btn:'modify'
  }
}

zh.js:

export default {
  message: {
      hello: '你好，世界',
      btn:'修改'
  }
}

2.3 . 接着在lang文件夹下创建一个index.js文件：

import { createI18n } from 'vue-i18n';
import en from "./en.js"
import zh from "./zh.js"

const messages = {//所有语言
    zh: zh,
    en: en,
}

const i18n = createI18n({
    locale: 'zh', //默认当前语言
    fallbackLocale: 'en', //替补语言，比如上边locale语言显示不了了就显示这个语言
    messages, //所有语言
    legacy:false, //用于区分是否使用组合式api，v3使用要设为false
})

export default i18n;

现在目录结构是这样：

3. 在main.js中引入并use刚才创建的index.js文件：

import { createApp } from 'vue'

import App from './App.vue'
import i18n from './lang/index.js'

createApp(App).use(i18n).mount('#app')

4. 到此基本配置已经完成了，接下来使用：

在项目中任意一个.vue文件中：

<template>
  <p>{{ t("message.hello") }}</p>
</template>

<script setup>//setup语法糖加上
import { useI18n } from 'vue-i18n';//从i18n中引入
const { t } = useI18n();//结构出t，各国的语言就在这个t里，使用方法就是<template>模板中那样直接使用

</script>

5.修改语言

<template>
  <p>{{ t("message.hello") }}</p>
  <button @click="change">{{ t("message.btn") }}</button>
</template>

<script setup>//setup语法糖加上
import { useI18n } from 'vue-i18n';//从i18n中引入
const { t,locale } = useI18n();//解构出t，各国的语言就在这个t里，使用方法就是<template>模板中那样直接使用
//修改用解构的locale.value修改

const change = ()=>{//按钮点击事件
  if(locale.value == 'en'){
    locale.value = 'zh'
  }else{
    locale.value = 'en'
  }
}
</script>