前言

 📫 大家好，我是南木元元，热爱技术和分享，欢迎大家交流，一起学习进步！

 🍅 个人主页：南木元元

---

目录

国际化简介

vue-i18n

安装和配置

创建语言包

基本使用

切换语言

动态翻译

结语

---

国际化简介

国际化是指将软件的用户界面翻译成多种语言的过程，国际化的好处：

• 拓展市场：使软件能够覆盖更多的用户群体，进入全球市场
• 用户体验：提供符合用户语言和文化习惯的界面和内容，提升用户体验
• 维护性：使团队能在不修改核心代码的情况下，添加或更新新的语言支持，降低维护成本

vue-i18n

Vue.js、React.js 和 Angular.js 都有相应的国际化插件和库，Vue I18n 是 Vue.js 的国际化插件，它可以轻松地将一些本地化功能集成到Vue应用程序中。

Vue I18n官网：Vue I18n

安装和配置

在项目根目录下使用npm或yarn安装vue-i18n插件：

npm install vue-i18n

在 main.js 中导入并作为插件使用：

import VueI18n from 'vue-i18n'
Vue.use(VueI18n)

创建 VueI18n实例 并配置语言包：

// 创建 VueI18n 实例
const i18n = new VueI18n({
  locale: 'en', //默认语言
  messages //引入的语言包
})

将 Vue I18n 实例集成到Vue 实例中：

new Vue({
  i18n,
  render: h => h(App)
}).$mount('#app')

创建语言包

messages语言包是一个包含各种语言翻译字符串的对象，由键值对组成，结构如下：

const messages = {
  en: {
    message: {
      hello: 'hello world'
    }
  },
  ja: {
    message: {
      hello: 'こんにちは、世界'
    }
  }
}

语言包对象会比较大，可以在src下创建一个名为lang的文件夹，并在其中创建对应语言的js文件，如en.js，zh.js等，在文件中定义对应语言的翻译内容。

zh.js示例：

// 创建中文语言包对象
export default {
  login: {
    username: "用户名",
    password: "密码",
    title: '海贼王',
  },
};

en.js示例：

// 创建英文语言包对象
export default {
  login: {
    username: "username",
    password: "password",
    title: "One Piece",
  },
};

main.js中导入语言包对象：

// 从语言包文件中导入语言包对象
import zh from './zh'
import en from './en'

const messages = {
  zh,
  en
}

main.js完整代码：

import Vue from 'vue'
import App from './App.vue'
// 导入VueI18n插件
import VueI18n from 'vue-i18n'
// 从语言包文件中导入语言包对象
import zh from './zh'
import en from './en'
// 安装插件
Vue.use(VueI18n)
// 定义语言包
const messages = {
  zh,
  en
}
// 创建 VueI18n 实例
const i18n = new VueI18n({
  locale: 'en', //默认语言
  messages //引入的语言包
})

Vue.config.productionTip = false
// 将插件集成到Vue实例中
new Vue({
  i18n,
  render: h => h(App),
}).$mount('#app')

基本使用

在组件中使用国际化内容，可以通过this.$t方法来获取对应语言的翻译内容。在模板中可以使用$t指令直接渲染对应的翻译内容。

<template>
  <div>
    <p>{{ $t('login.title') }}</p>
    <p>{{ $t('login.username') }}</p>
    <p>{{ $t('login.password') }}</p>
  </div>
</template>

示例：

 将locale值设为zh：

const i18n = new VueI18n({
  messages,
  locale: 'zh'
})

切换语言

当前切换语言是手动去修改locale的值，这种切换方法当然不行了。我们可以在页面中为用户提供语言切换按钮。

<template>
  <div>
    <button @click="changeLanguage('en')">切换为英文</button>
    <button @click="changeLanguage('zh')">切换为中文</button>
  </div>
</template>

点击时，通过修改locale动态切换语言： 

methods: {
  changeLanguage(lang) {
    this.$i18n.locale = lang
  },
},

动态翻译

有时候我们需要在代码中动态地进行翻译。vue-i18n提供了this.$t方法的第二个参数，可以传入一个对象来替换翻译内容中的占位符。

示例：

<template>
  <div>
    <p>{{ $t('title', {name: 'One Piece'}) }}</p>
  </div>
</template>

{
   title: "hello, {name}",
}

结语

🔥如果此文对你有帮助的话，欢迎💗关注、👍点赞、⭐收藏、✍️评论，支持一下博主~