vue的i18n国际化

一、介绍

i18n 是国际化和本地化（Internationalization and Localization）的缩写，其中 "i" 和 "n" 分别代表单词的首尾字母，而 "18" 代表中间的字母数。这个术语用于描述软件应用程序支持多种语言和地区设置的过程。

1、国际化（Internationalization, i18n）

国际化是设计和开发软件应用程序的过程，使其能够轻松适应不同的语言和地区，而无需修改源代码。这通常包括：

使用可翻译的字符串（如通过外部文件或数据库存储）

支持Unicode编码，以便能够显示世界上大多数语言的字符

遵循地区特定的日期、时间、货币和数字格式

允许用户选择其首选的语言和地区设置

2、本地化（Localization, l10n）

本地化是将已经国际化的软件应用程序调整为特定地区或语言的过程。这包括：

翻译应用程序中的文本到目标语言

调整日期、时间、货币和数字的格式以符合目标地区的习惯

适配用户界面元素（如按钮、图标和布局）以符合目标地区的文化和习惯

应用： 某网站想支持中文、英文，法语，日语，阿拉伯语，且要求默认路径下是英文，其他的语言可以切换

二、安装

npm install vue-i18n@next --save

三、应用

1、新建文件夹

src/languages/lang 文件夹名字可自定义

2、编写zh.js en.js

zh.js

bash 复制代码

export default {
    language: '中文',
    home: {
        login: '登录',
        register: '注册'
    },
    title:'测试国际化'
    
  };

en.js

bash 复制代码

export default {
    language: 'english',
    home: {
        login: 'login...',
        register: 'register...'
    },
    title:'testi18n...'
    
  };

注意：多种语言的文件结构要保持一致！

3、index.js进行i18函数的创建和导出

bash 复制代码

import { createI18n } from 'vue-i18n'; // 引入vue-i18n组件
import zh from './lang/zh';
import en from './lang/en';
const lang = 'zh';// 默认显示语音
 
const i18n = createI18n({
  locale: lang, //默认
  messages: {
    zh, // 中文 
    en // 英文
  }
});
 
export default i18n;

4、main.js 注册

bash 复制代码

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import VueI18n from './language'

createApp(App).use(VueI18n).mount('#app')

5、使用

任意一个vue文件模板应用

bash 复制代码

<h1> {{ $t(`title`) }}</h1>
<h1> {{ $t(`home.register`) }}</h1>

6、切换语言

任意vue文件，增加切换按钮，绑定事件

bash 复制代码

<div>
<span class="language-text cur-pointer m-r-10" @click="setLang()">目前是：{{ $t(`language`) }}，点击切换</span>
</div>

bash 复制代码

<script setup>
import { defineComponent, getCurrentInstance } from 'vue';
const { proxy } = getCurrentInstance() ;
let lang = 'zh';
const setLang = () => {
      if (lang === 'zh') {
        proxy.$i18n.locale = 'en';
      } else {
        proxy.$i18n.locale = 'zh';
      }
      lang = proxy.$i18n.locale;
      localStorage.setItem('lang', lang);
};
</script>

)