vue3+ts使用i18n切换语言

1、下载i18n：

        npm install vue-i18n --save

npm install vue-i18n --save

---

2、创建语言配置：

在src目录下创建一个名为i18n的文件夹，在里面分别创建index.ts、enConfig.ts、cnConfig.ts

提示：文件名可以随便起，只要对应就可以

enConfig.ts

//enConfig
export default {
  message: {
    hello: 'hello world',
    name:'name'
  }
}

zhConfig.ts

//zhConfig.ts
export default {
  message: {
    hello: '你好',
    name:'姓名'
  }
}

index.ts

//index.ts
import { createI18n } from "vue-i18n";
import en from './i18n/enConfig'
import zh from "./i18n/zhConfig";

const i18n = createI18n({
  locale:localStorage.getItem('language') || 'zhCn', // 默认是中文
  //fallbackLocale: 'en', // 语言切换的时候是英文
  globalInjection:true,//全局配置
  legacy:false,//vue3写法
  messages:{en,zh}// 你需要做国际化的语种,就是刚才编写的两个语言

})

export default i18n

---

3、配置main.ts：

import i18n from '@/i18n/index'

app.use(i18n)

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import i18n from '@/i18n/index' //引入配置的语言

import "@/assets/base.css"
import App from './App.vue'
import router from './router'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
const app = createApp(App)
import 'virtual:svg-icons-register' 
import './permission'
import  svgcomponent from './components/svg_component.vue'

// import 'lib-flexible'
app.use(createPinia())
app.component('SvgComponent',svgcomponent)
app.use(router)
app.use(ElementPlus)
app.use(i18n)    //挂载
app.mount('#app')

---

4、中英文切换：

const { locale } = useI18n()   //导入

locale.value = 'cn' //修改切换语言

<template>
      <button @click="changecn">点击切换中文</button>
      <button @click="changezh">点击切换英文</button>
</template>

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

const {locale}= useI18n()
//储存语种并进行切换
const changecn= () => {
  localStorage.setItem('language','cn')
  locale.value = 'cn'

};
const changezh= () => {
  localStorage.setItem('language','zh')
  i18n.locale.value = 'zh'
};
</script>
<style scoped lang="less">

</style>

5、页面使用：

直接使用{{ $t(“message.name”) }}

<template>
  <div>
    {{ $t("message.name") }}
  </div>
</template>

<script setup lang="ts"></script>
<style scoped lang="less">

</style>