Vue项目i18n国际化多语言切换方案实践

1. 前言

Vue项目国际化能让应用适应不同地区用户需求。本文将围绕Vue项目国际化，借助官方提供的Vue I18n插件，介绍，讲解安装配置、多语言切换、复杂场景应用及优化等等。

2. i18n插件概述

Vue I18n是Vue官方推荐用于实现国际化的插件，它通过加载不同语言的翻译文件，结合Vue的响应式特性，实现页面内容的动态切换。Vue I18n支持多种语言格式，如JSON、YAML等，同时具备以下优势：

• 灵活配置：开发者可以根据项目需求，自由定义语言包结构和加载方式。
• 与Vue深度集成：无缝融入Vue的生态体系，支持组件内使用指令、过滤器等方式展示翻译内容。
• 动态切换：能够在运行时动态切换语言，满足用户随时切换语言环境的需求。

3. 安装与基础配置

3.1. 安装Vue I18n

在Vue项目中，可以使用npm或yarn安装Vue I18n插件：

# 使用npm安装
npm install vue-i18n@next

# 使用yarn安装
yarn add vue-i18n@next

3.2. 初始化I18n实例

在main.js或main.ts文件中，引入并配置Vue I18n。首先创建语言包，假设项目需要支持中文（简体）和英文，在src/locales目录下创建zh-CN.json和en-US.json文件：
zh-CN.json

{
  "message": {
    "hello": "你好",
    "welcome": "欢迎使用本应用"
  }
}

en-US.json

{
  "message": {
    "hello": "Hello",
    "welcome": "Welcome to use this application"
  }
}

然后在main.js中初始化I18n实例：

import { createApp } from 'vue';
import { createI18n } from 'vue-i18n';
import App from './App.vue';

// 引入语言包
import zhCN from './locales/zh-CN.json';
import enUS from './locales/en-US.json';

const i18n = createI18n({
  legacy: false, // 使用 Composition API 模式
  locale: 'zh-CN', // 设置默认语言
  fallbackLocale: 'en-US', // 设置备用语言
  messages: {
    'zh-CN': zhCN,
    'en-US': enUS
  }
});

const app = createApp(App);
app.use(i18n);
app.mount('#app');

3.3. 在组件中使用翻译内容

在Vue组件中，可以通过$t方法来获取翻译后的文本。例如：

<template>
  <div>
    <h1>{{ $t('message.hello') }}</h1>
    <p>{{ $t('message.welcome') }}</p>
  </div>
</template>

上述代码中，$t方法会根据当前设置的语言，从对应的语言包中获取相应的文本内容。

4. 动态切换语言

为了让用户能够在应用中自由切换语言，可以在组件中添加语言切换按钮，并编写切换逻辑。

<template>
  <div>
    <button @click="switchLanguage('zh-CN')">中文</button>
    <button @click="switchLanguage('en-US')">英文</button>
    <h1>{{ $t('message.hello') }}</h1>
    <p>{{ $t('message.welcome') }}</p>
  </div>
</template>

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

export default {
  setup() {
    const { locale } = useI18n();

    const switchLanguage = (lang) => {
      locale.value = lang;
    };

    return {
      switchLanguage
    };
  }
};
</script>

在上述代码中，通过useI18n函数获取locale响应式变量，修改其值即可实现语言的动态切换，页面内容也会随之更新。

5. 复杂场景应用

5.1. 动态文本插值

在实际应用中，经常会遇到需要在翻译文本中插入动态数据的情况。Vue I18n支持使用占位符来实现动态文本插值。例如：
zh-CN.json

{
  "message": {
    "greet": "你好，{name}！"
  }
}

en-US.json

{
  "message": {
    "greet": "Hello, {name}!"
  }
}

在组件中使用：

<template>
  <div>
    <p>{{ $t('message.greet', { name: 'Alice' }) }}</p>
  </div>
</template>

上述代码会根据当前语言，将{name}替换为实际传入的值，生成相应的问候语。

5.2. 复数处理

不同语言对复数的表达规则各不相同，Vue I18n提供了复数处理功能。以英文和中文为例：
zh-CN.json

{
  "message": {
    "apple_count": "{count, plural, =0 {没有苹果} =1 {有1个苹果} other {有{count}个苹果}}"
  }
}

en-US.json

{
  "message": {
    "apple_count": "{count, plural, =0 {There are no apples} =1 {There is 1 apple} other {There are {count} apples}}"
  }
}

在组件中使用：

<template>
  <div>
    <p v-for="count in [0, 1, 5]" :key="count">{{ $t('message.apple_count', { count }) }}</p>
  </div>
</template>

通过这种方式，Vue I18n会根据count的值和对应语言的复数规则，生成正确的文本。

6. 优化与扩展

6.1. 代码分割与按需加载

当项目支持的语言较多时，全部语言包一次性加载会影响应用的初始加载速度。可以使用Webpack或Vite的代码分割功能，实现语言包的按需加载。例如，在Vite项目中，可以修改vite.config.js配置：

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import vueI18n from '@intlify/unplugin-vue-i18n/vite';

export default defineConfig({
  plugins: [
    vue(),
    vueI18n({
      include: './src/locales/**',
      runtimeOnly: false
    })
  ]
});

上述配置会将语言包进行单独打包，在需要时动态加载，提升应用性能。

6.2 结合浏览器语言自动设置

为了提供更好的用户体验，可以根据用户浏览器的默认语言，自动设置应用的语言。在main.js中添加以下代码：

import { createApp } from 'vue';
import { createI18n } from 'vue-i18n';
import App from './App.vue';

// 引入语言包
import zhCN from './locales/zh-CN.json';
import enUS from './locales/en-US.json';

const browserLang = navigator.language.slice(0, 2);
const i18n = createI18n({
  legacy: false,
  locale: ['zh', 'zh-CN'].includes(browserLang)? 'zh-CN' : 'en-US',
  fallbackLocale: 'en-US',
  messages: {
    'zh-CN': zhCN,
    'en-US': enUS
  }
});

const app = createApp(App);
app.use(i18n);
app.mount('#app');

通过上述代码，应用会优先使用用户浏览器的语言，若不支持则使用默认语言。

本次分享就到这儿啦，我是鹏多多，如果您看了觉得有帮助，欢迎评论，关注，点赞，转发，我们下次见~

往期文章

• vue中ref的详解以及react的ref对比
• css使用aspect-ratio制作4:3和9:16和1:1等等比例布局
• Web前端页面开发阿拉伯语种适配指南
• flutter-使用extended_image操作图片的加载和状态处理以及缓存和下载
• flutter-制作可缩放底部弹出抽屉评论区效果
• flutter-实现Tabs吸顶的PageView效果
• Vue2全家桶+Element搭建的PC端在线音乐网站
• 助你上手Vue3全家桶之Vue3教程
• 超详细！vue组件通信的10种方式
• 超详细！Vuex手把手教程
• 使用nvm管理node.js版本以及更换npm淘宝镜像源
• vue中利用.env文件存储全局环境变量，以及配置vue启动和打包命令

个人主页

• CSDN
• GitHub
• 掘金