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),它支持一键扫描中文,并提取到指定文件生成对应的语言包对象

相关推荐
计算机-秋大田4 小时前
基于Spring Boot的船舶监造系统的设计与实现,LW+源码+讲解
java·论文阅读·spring boot·后端·vue
Yaml415 小时前
Spring Boot 与 Vue 共筑二手书籍交易卓越平台
java·spring boot·后端·mysql·spring·vue·二手书籍
清灵xmf18 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询
琴~~2 天前
前端根据后端返回的文本流逐个展示文本内容
前端·javascript·vue
程序员徐师兄2 天前
基于 JavaWeb 的宠物商城系统(附源码,文档)
java·vue·springboot·宠物·宠物商城
shareloke2 天前
让Erupt框架支持.vue文件做自定义页面模版
vue
你白勺男孩TT3 天前
Vue项目中点击按钮后浏览器屏幕变黑,再次点击恢复的解决方法
vue.js·vue·springboot
虞泽3 天前
鸢尾博客项目开源
java·spring boot·vue·vue3·博客
工业互联网专业3 天前
Python毕业设计选题:基于django+vue的4S店客户管理系统
python·django·vue·毕业设计·源码·课程设计
麦麦大数据3 天前
vue+django+neo4j航班智能问答知识图谱可视化系统
django·vue·echarts·neo4j·智能问答·ltp·航班