vue3中多语言切换vue-i18n

安装

npm install vue-i18n@next

使用

一.在src中创建i18n文件夹（文件名无所谓）

在i18n下创建 en.ts/js  zh.ts/js  index.ts/js 分别写入下面代码

en.ts/js

//en
export default {
  message: {
    hello: 'hello',
    name:'name'
  }
}

zh.ts/js

//zh
export default {
  message: {
    hello: '你好',
    name:'姓名'
  }
}

index.ts/js

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

二.在main.ts进行引入   注意看路径

main.ts/js

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router/index'
import i18n from './i18n/index' //引入配置的语言

const app = createApp(App)
app.use(router)
app.use(i18n)    //挂载
app.mount('#app')

三.页面使用

以上操作即可实现