vue3项目实现全局国际化

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

文章目录

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

基础准备

引入插件vue-i18n

安装插件

bash 复制代码
npm i vue-i18n

【注】安装过程中报错

npm ERR! Cannot read properties of null (reading 'matches')

解决方案:

先清除npm缓存:

bash 复制代码
npm cache clean --force

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

bash 复制代码
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文件】

javascript 复制代码
export default {
  button: {
    confirm: 'Confirm',
    login: 'Login',
    title1: 'table',
    title2: 'pagination'
  }
};

【zh-cn.js文件】

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

【i18n.js文件】

javascript 复制代码
// 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文件中进行引入,方便全局使用,

javascript 复制代码
import i18n from './locales/i18n';
app.use(i18n);
app.mount('#app');

3. App组件配置

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

html 复制代码
<template>
  <el-config-provider :locale="elLocale">
    <router-view />
  </el-config-provider>
</template>
javascript 复制代码
<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组件切换逻辑

切换按钮:

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

切换逻辑:

javascript 复制代码
import i18n from '@/locales/i18n'

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

5. 在首页示例展示效果

示例组件:

直接使用$t函数直接双向绑定

javascript 复制代码
<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>

效果:



【注】vscode有一个插件:du-i18n,由于项目中需要替换的地方太多,如果手动自定义语言包工作量太大,所以推荐一个vscode插件(du-i18n),它支持一键扫描中文,并提取到指定文件生成对应的语言包对象

相关推荐
Backstroke fish1 天前
Token刷新机制
前端·javascript·vue.js·typescript·vue
小曲程序1 天前
vue3 封装request请求
java·前端·typescript·vue
Lysun0011 天前
[less] Operation on an invalid type
前端·vue·less·sass·scss
程序视点1 天前
【Vue3新工具】Pinia.js:提升开发效率,更轻量、更高效的状态管理方案!
前端·javascript·vue.js·typescript·vue·ecmascript
刚刚好ā1 天前
js作用域超全介绍--全局作用域、局部作用、块级作用域
前端·javascript·vue.js·vue
ZwaterZ2 天前
vue el-table表格点击某行触发事件&&操作栏点击和row-click冲突问题
前端·vue.js·elementui·c#·vue
ZwaterZ2 天前
el-table-column自动生成序号&&在序号前插入图标
前端·javascript·c#·vue
木子七2 天前
vue2-vuex
前端·vue
小小黑0072 天前
uniapp+vue3+ts H5端使用Quill富文本插件以及解决上传图片反显的问题
uni-app·vue
Ztiddler2 天前
【npm设置代理-解决npm网络连接error network失败问题】
前端·后端·npm·node.js·vue