国际化处理——Vue-i18n+Element UI

HowieCong
380 阅读5分钟

🧑‍💻Vue-i18n+Element UI国际化处理-HowieCong

1. 背景

graph LR
项目需要支持多地区用户 --> 进行国际化处理 --> 满足多用户需求

2. 使用方法

  • 技术方案：

    • Vue-i18n（Vue.js 生态中非常强大的国际化插件）

    • Element UI（Element UI 是我们项目使用的 UI 框架）

  • 思路：

    • 将所有需要进行国际化的文本提取出来

    • 存储在不同的语言文件中

    • 根据用户的语言选择来动态展示相应语言的文本

3. 依赖vue-i18n+element-ui安装

  • npm install vue-i18n element-ui 或 yarn add vue-i18n element-ui

  • Npm官网——vue-i18n - npm

  • Vue-i18n可以方便地处理语言文件地管理和文本的翻译；Element UI提供了丰富的组件，让我们能够更快速地构建界面

4. 语言文件创建

  • 在src目录下创建locales文件夹，其中存放不同语言的JSON格式的翻译文件

  • 这些文件是我们国际化的核心数据，它们包含了各种界面元素对应的不同语言的文本内容

  • en.json（英语）

{ 
    "welcome": "Welcome to our website!", 
    "description": "This is a description of our service."
}
  • zh-CN.json（简体中文）
{ 
    "welcome": "欢迎来到我们的网站！", 
    "description": "这是我们服务的描述。"
}
  • ja.json（日语）
{ 
    "welcome": "私たちのウェブサイトへようこそ！", 
    "description": "これは私たちのサービスの説明です。" 
}

5. 在Vue项目中配置

  • 在入口文件，一般为src/main.js中引入Vue-i18n、Element UI进行配置

  • 关键是通过 Cookies.get('language') 从 Cookie 中获取用户之前选择的语言。如果用户是首次访问，没有存储语言信息，我们将默认使用英文（'en'）。这种方式可以确保用户在下次打开页面时，能看到他们上次使用的语言界面，提升用户体验。

import Vue from 'vue'; 
import VueI18n from 'vue-i18n'; 
import ElementUI from 'element-ui'; 
import 'element-ui/lib/theme-chalk/index.css'; 
import App from './App.vue'; 
import en from './locales/en.json'; 
import zhCN from './locales/zh-CN.json'; 
import ja from './locales/ja.json'; 
import Cookies from 'js-cookie'; 

Vue.use(VueI18n); 
Vue.use(ElementUI);

// 从 Cookie 中获取上次存储的语言，若没有则默认为 'en' 
const savedLang = Cookies.get('language') || 'en'; 
const i18n = new VueI18n({ 
    locale: savedLang, 
    messages: { 
        en: en, 
        'zh-CN': zhCN, 
        ja: ja 
       } 
      }); 
    new Vue({ 
       render: h => h(App), 
       i18n: i18n 
}).$mount('#app');

6. 在组件中使用Vue-i18n和Element UI

  • 在Vue组件中，使用$t方法引用翻译文本，使用Element UI组件，并添加语言切换功能

  • 添加了几个语言切换按钮，用户点击按钮时调用 switchLanguage 方法。该方法将更新 Vue-i18n 的 locale 属性，同时使用 Cookies.set('language', lang) 将用户选择的语言存储在 Cookie 中，这样即使页面刷新或下次访问，语言设置也能保留

<template> 
    <div> 
        <el-button @click="switchLanguage('en')">{{ $t('english') }}</el-button> 
        <el-button @click="switchLanguage('zh-CN')">{{ $t('chinese') }}</el-button> 
        <el-button @click="switchLanguage('ja')">{{ $t('japanese') }}</el-button> 
        <h1>{{ $t('welcome') }}</h1> 
        <p>{{ $t('description') }}</p> 
     </div> 
</template> 
<script> 
    import Cookies from 'js-cookie'; 
    export default { 
        name: 'App', 
        methods: { 
            switchLanguage(lang) { 
                this.$i18n.locale = lang; 
                // 将选择的语言存储在 Cookie 中 
                Cookies.set('language', lang); 
                } 
        } 
    }; 
</script>

7. 完善语言文件和组件

  • 为了使语言切换按钮对的显示也能国际化，更新语言文件，语言切换按钮的显示也会根据当前语言进行国际化，使整个界面更加统一和用户友好

  • en.json

{ 
"welcome": "Welcome to our website!", 
"description": "This is a description of our service.", 
"english": "English", 
"chinese": "Chinese", 
"japanese": "Japanese"
}
  • zh-CN.json
{ 
    "welcome": "欢迎来到我们的网站！", 
    "description": "这是我们服务的描述。",
    "english": "英语",
    "chinese": "中文", 
    "japanese": "日语" 
}
  • ja.json
{ 
    "welcome": "私たちのウェブサイトへようこそ！", 
    "description": "これは私たちのサービスの説明です。", 
    "english": "英語", 
    "chinese": "中国語", 
    "japanese": "日本語" 
}

8. 优化语言切换逻辑

  • 应用中的不同组件都可能需要进行语言切换操作，将语言切换逻辑封装到VueX存储

  • Vuex安装：npm install vuex 或 yarn add vuex 来引入Vuex

  • 创建Vuex存储：在src/store/index.ts中创建Vuex存储，存储用户当前选择的语言，定义相关的状态、突变和动作

import Vue from 'vue';
import Vuex from 'vuex';
import Cookies from 'js-cookie';
import VueI18n from 'vue-i18n';
import en from '../locales/en.json';
import zhCN from '../locales/zh-CN.json';
import ja from '../locales/ja.json';
Vue.use(Vuex);
const savedLang = Cookies.get('language') || 'en';
const i18n = new VueI18n({
    locale: savedLang,
    messages: {
        en: en,
        'zh-CN': zhCN,
        ja: ja
    }
});
export default new Vuex.Store({
    state: {
    locale: savedLang
    },
    mutations: {
        SET_LANG(state, lang) {
            state.locale = lang;
            i18n.locale = lang;
            Cookies.set('language', lang);
        }
    },
    actions: {
        switchLanguage({ commit }, lang) {
            commit('SET_LANG', lang);
        }
    }
});
  • 在入口文件中使用Vuex存储
import Vue from 'vue';
import App from './App.vue';
import store from './store';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
new Vue({
    render: h => h(App),
    store: store
}).$mount('#app');
  • 在组件中使用Vuex进行语言切换
<template>
    <div><el-button @click="switchLanguage('en')">{{
$t('english') }}</el-button>
    <el-button @click="switchLanguage('zh-CN')">{{ 
$t('chinese') }}</el-button>
    <el-button @click="switchLanguage('ja')">{{
$t('japanese') }}</el-button>
    <h1>{{ $
t('welcome') }}</h1>
    <p>{{ $t('description')}</p>
</div>
</template>
<script>
import { mapActions } from 'vuex';
export default {
    name: 'App',
    methods: {
        ...mapActions(['switchLanguage'])
    }
};
</script>

9. 实现成果

  • 实现一个支持3种语言（英语、简体中文、日语）的国际化功能点 => 用户可以方便地在不同语言之间切换

  • 语言设置会被存储在Cookie中，保证用户下次访问时可以直接使用之前地语言偏好 => 提高了用户体验

  • 总体上 => 能更好地服务于不同地区的用户

10. 更多难点分析

10.1 语言文件的维护

  • 背景：项目扩大 => 语言文件大 => 维护困难

  • 解决方法：

    • 按模块或页面划分语言文件的方式，将不同页面或模块的翻译内容分别存储在不同文件中
    • 在vue-i18n的message对象中合并，方便管理和维护

10.2 动态内容的翻译

  • 背景： 有些文本是根据后端动态生成的，如何进行翻译就是一个问题

  • 解决方法；

    • 使用vue-i18n的编程式API，在组件的methods或computed中根据后端数据动态调用$t方法进行翻译

更多国际化处理的文章

❓其他

1. 疑问与作者HowieCong声明

  • 如有疑问、出错的知识，请及时点击下方链接添加作者HowieCong的其中一种联系方式或发送邮件到下方邮箱告知作者HowieCong

  • 若想让作者更新哪些方面的技术文章或补充更多知识在这篇文章，请及时点击下方链接添加里面其中一种联系方式或发送邮件到下方邮箱告知作者HowieCong

  • 声明：作者HowieCong目前只是一个前端开发小菜鸟，写文章的初衷只是全面提高自身能力和见识；如果对此篇文章喜欢或能帮助到你，麻烦给作者HowieCong点个关注/给这篇文章点个赞/收藏这篇文章/在评论区留下你的想法吧，欢迎大家来交流！

2. 作者社交媒体/邮箱-HowieCong

avatar
文章
阅读
粉丝