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