Vue3 实现国际化

什么是前端国际化？

国际化是做框架，帮助快速实施本地化。框架的设计实现决定了进行本地化的效率与质量。那什么是本地化？本地化就是在特定语言文化下，使产品能服务当地客户的使用习惯，总的来说，就是为一个系统提供不同语言的切换。

国际化实现原理

我们需要提供不同语言的资源包 比如我们有一个变量msg，我们需要根据当前选择语言，切换msg取值。
1、你好世界
2、hello world

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

实际工作中，我们并不会自己去封装一个国际化的函数，而是使用i18n插件，实现Vue项目的国际化。

vue 项目的国际化

在 vue3 的项目中，我们使用 vue-i18n@next 进行国际化功能的实现。

vue-i8 的使用可以分为四个部分：
1、创建 messages 数据源
2、创建 locale 语言变量
3、初始化 i18n 实例
4、注册 i18n 实例

安装 vue-i18n

 npm install vue-i18n@next

配置 i18n 项目文件

1、创建配置文件 /i18/index.js

import { createI18n } from 'vue-i18n'

// 设置语言资源包
const messages = {
    en:{
        msg:{
            test:'hello world'
        }
    },
    zh:{
        msg:{
            test:'你好世界'
        }
    }
}

// 设置语言
const locale = 'en'

let i18n = createI18n({
    // 使用 composition API
    legacy:false,
    // 全局使用 t 函数
    globalInjection:true,
    locale,
    messages
})

export default i18n

2、i18n 引入 main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import i18n from '@/i18n'

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

3、页面使用 t 函数

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

4、触发事件，进行语言切换

<template>
  <div class="about">
    <h1>{{ $t('msg.test') }}</h1>
  </div>
  <button @click="changeLanguage('zh')">中文</button>
  <button @click="changeLanguage('en')">英文</button>
</template>
<script setup>
import { useI18n } from 'vue-i18n'

const i18n = useI18n()
const changeLanguage = (code) => {
  i18n.locale.value = code
}
</script>

谢谢观看