vue3国际化

首先了解下i18n国际化核心原理

// 1、定义 msg 值的数据源
const messages={
  en:{
    msg:'hello word'
  },
  zh:{
    msg:'你好世界'
  }
}
//2.定义切换变量
let locale ='en'
//3.定义赋值函数
function t(key){
  return message[locale][key]
}
//4.为msg赋值
let msg=t('msg')
console.log(msg)

安装

npm install vue-i18n

引入

• 1、src根目录下新建文件夹 i18n
• 2、i18n文件夹下新建文件index.js
  
• 3、index.js文件夹内容

import { createI18n } from 'vue-i18n'
const messages = {
  en: {
    msg: {
      test: 'hello word'
    }
  },
  zh: {
    msg: {
      test: '你好世界'
    }
  }
}

const locale = 'en'
const i18n = createI18n({
  // 使用 composition API
  legacy: false,
  // 全局使用 t 函数
  globalInjection: true,
  locale,//哪种语言
  messages//数据源
})

export default i18n

• 4、main.js注册

import i18n from './i18n'
app.use(i18n)

使用

<template>
  <div class="">{{ $t('msg.test') }}</div>
</template>

<script setup>
import {} from 'vue'
</script>

<style lang="scss" scoped></style>