vue3项目实现全局国际化

embedded/2024/9/19 22:56:17/ 标签: vue

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

文章目录

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

基础准备

vuei18n_8">引入插件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>

vue_116">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>