vue3项目实现全局国际化

news2024/9/21 18:54:42

本文主要梳理vue3项目实现全项目格式化，例如在我前面文章使用若依创建vue3的项目中，地址：若依搭建vue3项目在导航栏中切换，页面中所有的组件的默认语言随之切换，使用的组件库依旧是element-plus，搭配vue-i18n插件

文章目录

基础准备
- - 引入插件vue-i18n
实现示例流程
- - 1. 创建国际化文件
  - 2. 全局引入（main.js）
  - 3. App组件配置
  - 4. 在导航栏navbar.vue组件切换逻辑
  - 5. 在首页示例展示效果

基础准备

引入插件vue-i18n

安装插件

npm i vue-i18n

【注】安装过程中报错
npm ERR! Cannot read properties of null (reading ‘matches‘)
解决方案：
先清除npm缓存：

npm cache clean --force

再使用pnpm进行安装（未安装的话就npm i pnpm一下即可）

pnpm i vue-i18n

或者在package.json文件中直接添加 “vue-i18n”: “^10.0.1”,版本，在进行重新进行npm install一下也可以
在这里插入图片描述

实现示例流程

主要使用的element-plus组件库中的el-config-provider组件进行配置，饿了么团队针对国际化已经做了相应的语言包，只需要改变组件中的locale属性来进行切换即可，官方示例地址：国际化

1. 创建国际化文件

在src文件目录下创建locales文件夹，文件夹下创建：en.js，i18n.js，zh-cn.js三个文件
【en.js文件】

export default {
  button: {
    confirm: 'Confirm',
    login: 'Login',
    title1: 'table',
    title2: 'pagination'
  }
};

【zh-cn.js文件】

export default {
  button: {
    confirm: '确认',
    login: '登录',
    title1: '表格',
    title2: '分页'
  }
};

【i18n.js文件】

// i18n配置
import { createI18n } from "vue-i18n";
import zh from "./zh-cn";
import en from "./en";

// 创建i18n
const i18n = createI18n({
  locale: localStorage.getItem("language") || "zh", // 语言标识
  globalInjection: true, // 全局注入,可以直接使用$t
  // 处理报错: Uncaught (in promise) SyntaxError: Not available in legacy mode (at message-compiler.esm-bundler.js:54:19)
  legacy: false,
  messages: {
    zh,
    en
  }
});

export default i18n;

解析：

locale属性：用于控制语言的标识，默认中文，此处使用了localStorage本地储存，方便全局且页面刷新都可以保持选中值
globalInjection属性：全局注入,可以直接使用$t函数，国际化主要分两块，一个是elementUI的默认文本就是el-config-provider组件可以直接控制、另一个是页面元素的展示文本，其中页面元素就需要 $t函数来进行手动编写，所以globalInjection属性值为true，非常重要
legacy属性：处理报错，默认false或者不使用也可
messages属性：切换文本的主要内容值，当locale的属性切换，所对应的语言的文本展示

2. 全局引入（main.js）

在入口文件main.js文件中进行引入，方便全局使用，

import i18n from './locales/i18n';
app.use(i18n);
app.mount('#app');

3. App组件配置

在app.vue组件中的router-view使用el-config-provider组件包裹，这样全局页面元素使用element-plus的组件都可以全局一次性控制

<template>
  <el-config-provider :locale="elLocale">
    <router-view />
  </el-config-provider>
</template>

<script setup>
import zh from 'element-plus/dist/locale/zh-cn.mjs'
import en from 'element-plus/dist/locale/en.mjs'
import i18n from '@/locales/i18n'

const elLocale = computed(() => {
  return i18n.global.locale.value === 'en' ? en : zh
})
</script>

4. 在导航栏navbar.vue组件切换逻辑

切换按钮：

 <el-button @click="translate('zh')">切换为中文</el-button>
 <el-button @click="translate('en')">切换为英文</el-button>

切换逻辑：

import i18n from '@/locales/i18n'

function translate(lang) {
  localStorage.setItem('language', lang)
  i18n.global.locale.value = lang
}

5. 在首页示例展示效果

示例组件：
直接使用$t函数直接双向绑定

<template>
  <div class="page-container">

    <el-divider>{{ $t('button.title1') }}</el-divider>
    <el-table :data="[]"
              style="width: 100%">
      <el-table-column prop="date"
                       label="Date" />
      <el-table-column prop="name"
                       label="Name" />
      <el-table-column prop="address"
                       label="Address" />
    </el-table>
    <el-divider>{{ $t('button.title2') }}</el-divider>
    <el-pagination :total="100" />
    <el-button type="primary">{{ $t('button.login') }}</el-button>
  </div>
</template>

<script setup>
</script>
<style lang="scss" scoped>
.page-container {
  width: 100%;
  height: calc(100vh - 84px);
  background-color: #edeff5;
}
</style>