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

目录

一、介绍

二、插件基本思路

三、插件版本适用框架

[四、Vue3 中使用](#四、Vue3 中使用)

[1. 安装插件 vue-i18n](#1. 安装插件 vue-i18n)

[2. 定义和组合语言包](#2. 定义和组合语言包)

[3. 引入插件并创建 i18n 实例](#3. 引入插件并创建 i18n 实例)

[4. 挂载实例对象](#4. 挂载实例对象)

[main.js 文件中的完整代码:](#main.js 文件中的完整代码:)

在组件中使用:

四、动态切换语言

[1. 获取浏览器当前使用的语言](#1. 获取浏览器当前使用的语言)

[2. 按钮切换](#2. 按钮切换)


一、介绍

国际化是指项目能够根据不同国家的语言进行转换,便于不同国家的用户使用。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

bash 复制代码
// 使用 npm
npm install vue-i18n@9

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

2. 定义和组合语言包

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

javascript 复制代码
// src/langurage/en.js 
// 定义英文语言包对象
export default {
  navigateBar: {
    hotspot: 'Hotspot',
    experience: 'Experience',
    focus: 'Focus',
    recommend: 'Recommend'
  },
  tabs: {
    work: 'Work',
    private: 'Private',
    collect: 'Collect',
    like: 'Like'
  }
}
javascript 复制代码
// src/langurage/zh.js 
// 定义中文语言包对象
export default {
  navigateBar: {
    hotspot: '热点',
    experience: '经验',
    focus: '关注',
    recommend: '推荐'
  },
  tabs: {
    work: '作品',
    private: '私密',
    collect: '收藏',
    like: '喜欢'
  }
}

组合语言包对象:

javascript 复制代码
// src/main.js
const message = {
    en,
    zh
}

3. 引入插件并创建 i18n 实例

javascript 复制代码
// src/main.js
import { createI18n } from 'vue-i18n';

const i18n = createI18n({
  legacy: false,  // 设置为 false,启用 composition API 模式
  messages,
  locale: 'en'  // 设置默认语言
})

注意:在创建实例时,一定要将 legacy 属性设置为 false,因为 legacy 默认为 true,它支持使用 Vue2 框架中的 Options API,如果要在 Vue3 更好的使用 Composition API 模式,那么就需要将此属性手动设置为 false。

4. 挂载实例对象

javascript 复制代码
// src/main.js
import { createApp } from 'vue';

const app = createApp(App);

app.use(i18n);

main.js 文件中的完整代码:

javascript 复制代码
import { createApp } from 'vue';
import App from './App.vue';
import { createI18n } from 'vue-i18n';
import en from './langurage/en';
import zh from './langurage/zh';

// 组合语言包对象
const messages = {
  en,
  zh
}

// 创建实例对象
const i18n = createI18n({
  legacy: false,  // 设置为 false,启用 composition API 模式
  messages,
  locale: 'en'
})

// 创建 Vue 实例
const app = createApp(App);

// 注册对象
app.use(i18n);

// 挂载到 Dom 元素中
app.mount('#app');

在组件中使用:

html 复制代码
<template>
    <div>
        <ul>
            <li>{{ $t("navigateBar.hotspot") }}</li>
            <li>{{ $t("navigateBar.experience") }}</li>
            <li>{{ $t("navigateBar.focus") }}</li>
            <li>{{ $t("navigateBar.recommend") }}</li>
        </ul>
        <ol>
            <li>{{ $t("tabs.work") }}</li>
            <li>{{ $t("tabs.private") }}</li>
            <li>{{ $t("tabs.collect") }}</li>
            <li>{{ $t("tabs.like") }}</li>
        </ol>
    <div>
</template>

在步骤 2 中定义的语言包是对象形式的,如果你定义的是简单的属性形式,要注意在组件中使用时的形式。

四、动态切换语言

想要切换语言时,修改 locale 属性就可以了。

1. 获取浏览器当前使用的语言

如果一开始想使用浏览器中默认的语言,那么将 locale 属性改成如下即可:

javascript 复制代码
const i18n = createI18n({
  messages,
  locale: navigator.language // 获取浏览器的语言
})

2. 按钮切换

添加按钮切换语言时,Vue2 和 Vue3 的修改方式是不同的,在 Vue2 中使用全局的 this.$i18n.locale 就可以修改,但在 Vue3 中,需要 Hook 进行修改,如下所示:

html 复制代码
<template>
    <div>
        <div>
            <button @click="changeLocale('zh')">切换为中文</button>
            <button @click="changeLocale('en')">切换为中文</button>
        </div>
        <ul>
            <li>{{ $t("navigateBar.hotspot") }}</li>
            <li>{{ $t("navigateBar.experience") }}</li>
            <li>{{ $t("navigateBar.focus") }}</li>
            <li>{{ $t("navigateBar.recommend") }}</li>
        </ul>
        <ol>
            <li>{{ $t("tabs.work") }}</li>
            <li>{{ $t("tabs.private") }}</li>
            <li>{{ $t("tabs.collect") }}</li>
            <li>{{ $t("tabs.like") }}</li>
        </ol>
    <div>
</template>

<script setup>
import { useI18n } from "vue-i18n";

const { locale } = useI18n();

// 切换语言
const changeLocale = (lang) => {
  locale.value = lang;
};
</script>
相关推荐
Baklib梅梅17 小时前
2025 年 8 个最佳网站内容管理系统(CMS)
前端·ruby on rails·前端框架·ruby
IT_陈寒18 小时前
🔥5个必学的JavaScript性能黑科技:让你的网页速度提升300%!
前端·人工智能·后端
Bling_Bling_118 小时前
面试常考:js中 Map和 Object 的区别
开发语言·前端·javascript
前端小巷子18 小时前
JS实现丝滑文字滚动
前端·javascript·面试
oil欧哟18 小时前
🧐 我用 Vibe Coding 从 0 到 1 打造 AI 产品,上线一个月效果如何?有什么心得?
前端·产品·vibecoding
霍克itxt点top18 小时前
NestJS 入门到实战 前端必学服务端新趋势无密分享
前端
xiguolangzi18 小时前
1panel web服务部署
前端
写不出来就跑路18 小时前
基于 HTML+CSS+JavaScript 的薪资实时计算器(含本地存储和炫酷动画)
javascript·css·html
摘星编程18 小时前
Cursor Pair Programming:在前端项目里用 AI 快速迭代 UI 组件
前端·人工智能·ui·typescript·前端开发·cursorai
醉方休19 小时前
React Fiber 风格任务调度库
前端·javascript·react.js