vue3使用i18n集成 vue3+vite+i18n+pinia的使用 国际化 setup语法糖

本文说明：

1、花一分钟学会使用vue-i18n
2、学会中英文切换
3、在任何js文件中使用vue-i18n

安装依赖

npm install vue-i18n@next //安装最新版本的 vue-i18n

相关配置

创建i18n.js 文件

// src/plugins/i18n.js 文件
import {
    
     createI18n } from 'vue-i18n'
// 中文简体
import zh from '@/locale/zh-Hans.json'
// 英文
import en from '@/locale/en.json'

const i18n = createI18n({
    
    
  legacy: false,  // Composition API 模式
  locale: 'zh',		// 初始化为 中文
  globalInjection: true, // 全局注册 $t方法
  messages: {
    
    
    zh,
    en
  }
})

export default i18n

中英文对照 在locale文件夹下

// locale/en.json 文件
{
    
    
  "user": "user"
}


// locale/zh-Hans.json 文件
{
    
    
  "user": "用户123"
}

挂载实例

// main.js 文件
import {
    
     createApp } from 'vue'
import i18n from "@/plugins/i18n";

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

使用

setup语法以及在vue页面上使用i18n

// test.vue 页面

<template>
<p>
    {
   
   {$t('user')}}
    </p>
<el-button @click="chance('zh')">中文</el-button>
<el-button @click="chance('en')">英文</el-button>
</template>


<script setup >
import {useI18n} from "vue-i18n";
const {t,locale} = useI18n()
// 赋值
const user = t('user');
// 语言切换中英文
const chance = (val) => {
  locale.value = val  // zh en
}
</script>

在普通的js文件中使用i18n

// utlis.js 一个工具类
import i18n from "@/plugins/i18n";
const {
    
    t} =i18n.global

const service = ()=>{
    
    
    console.log("输出打印：",t("user"))  // 输出打印：用户123
}

---

END
希望对您有用！