Vue I18n 国际化插件，从安装到使用最全篇

最新推荐文章于 2025-03-11 14:50:57 发布

Baobao小包

最新推荐文章于 2025-03-11 14:50:57 发布

阅读量3.6w

点赞数 43

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/forever__fish/article/details/134335402

版权

一、介绍

国际化是指项目能够根据不同国家的语言进行转换，便于不同国家的用户使用。Vue I18 是 Vue.js 的国际化插件，它可以轻松地将一些本地化功能集成到应用程序中。

为什么插件名称是 i18n 呢？它的全程是 internationalization，插件名取了首字母 i 和尾字母 n，中间一共有 18 个字母，所以组合起来就叫 i18n。哈哈哈哈，起名起的离谱。

二、插件基本思路

1. 定义语言包：需要几种语言展示，就定义几个语言包。

2. 组合语言包对象：创建对象，对语言包进行组合，对象的 key 为语言包引用，值为语言包对象。

3. 创建实例：创建 vue-i18n 类的对象，添加 message 和 locale 属性。

4. 挂载：挂载创建的实例对象。

三、插件版本适用框架

vue-i18n 作为国际化插件，它主要有两个版本：v8 和 v9。v8 版本适用于 Vue2 框架，v9 版本适用于 Vue3 框架。具体区别可以查看官网，以下内容均在 Vue3 中使用。

四、Vue3 中使用

1. 安装插件 vue-i18n

// 使用 npm
npm install vue-i18n@9

// 使用 yarn
yarn add vue-i18n@9

2. 定义和组合语言包

先定义常用的两个语言包：

// src/langurage/en.js 
// 定义英文语言包对象
export default {
  navigateBar: {
    hotspot: 'Hotspot',
    experience: 'Experience',
    focus: 'Focus',
    recommend: 'Recommend'
  },
  tabs: {
    work: 'Work',
    private: 'Private',
    collect: 'Collect',
    like: 'Like'
  }
}