vue3项目实现全局国际化

本文告急梳理vue3项目实现全项目格式化，比方在我前面文章利用若依创建vue3的项目中，地点：若依搭建vue3项目在导航栏中切换，页面中全部的组件的默认语言随之切换，利用的组件库仍旧是element-plus，搭配vue-i18n插件
  

---

根本准备

引入插件vue-i18n

安装插件

1. npm i vue-i18n

复制代码

【注】安装过程中报错
npm ERR! Cannot read properties of null (reading ‘matches‘)
办理方案：
先打扫npm缓存：

1. npm cache clean --force

复制代码

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

1. pnpm i vue-i18n

复制代码

对于默认安装低版本的vue-i18n插件的环境，可利用npm i vue-i18n
@next大概在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文件】

1. export default {
2.   button: {
3.     confirm: 'Confirm',
4.     login: 'Login',
5.     title1: 'table',
6.     title2: 'pagination'
7.   }
8. };

复制代码

【zh-cn.js文件】

1. export default {
2.   button: {
3.     confirm: '确认',
4.     login: '登录',
5.     title1: '表格',
6.     title2: '分页'
7.   }
8. };

复制代码

【i18n.js文件】

1. // i18n配置
2. import { createI18n } from "vue-i18n";
3. import zh from "./zh-cn";
4. import en from "./en";
6. // 创建i18n
7. const i18n = createI18n({
8.   locale: localStorage.getItem("language") || "zh", // 语言标识
9.   globalInjection: true, // 全局注入,可以直接使用$t
10.   // 处理报错: Uncaught (in promise) SyntaxError: Not available in legacy mode (at message-compiler.esm-bundler.js:54:19)
11.   legacy: false,
12.   messages: {
13.     zh,
14.     en
15.   }
16. });
18. export default i18n;

复制代码

分析：

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

2. 全局引入（main.js）

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

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

复制代码

3. App组件设置

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

1. <template>
2.   <el-config-provider :locale="elLocale">
3.     <router-view />
4.   </el-config-provider>
5. </template>

复制代码

1. <script setup>
2. import zh from 'element-plus/dist/locale/zh-cn.mjs'
3. import en from 'element-plus/dist/locale/en.mjs'
4. import i18n from '@/locales/i18n'
6. const elLocale = computed(() => {
7.   return i18n.global.locale.value === 'en' ? en : zh
8. })
9. </script>

复制代码

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

切换按钮：

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

复制代码

切换逻辑：

1. import i18n from '@/locales/i18n'
3. function translate(lang) {
4.   localStorage.setItem('language', lang)
5.   i18n.global.locale.value = lang
6. }

复制代码

5. 在首页示例展示效果

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

1. <template>
2.   <div class="page-container">
4.     <el-divider>{{ $t('button.title1') }}</el-divider>
5.     <el-table :data="[]"
6.               style="width: 100%">
7.       <el-table-column prop="date"
8.                        label="Date" />
9.       <el-table-column prop="name"
10.                        label="Name" />
11.       <el-table-column prop="address"
12.                        label="Address" />
13.     </el-table>
14.     <el-divider>{{ $t('button.title2') }}</el-divider>
15.     <el-pagination :total="100" />
16.     <el-button type="primary">{{ $t('button.login') }}</el-button>
17.   </div>
18. </template>
20. <script setup>
21. </script>
22. <style lang="scss" scoped>
23. .page-container {
24.   width: 100%;
25.   height: calc(100vh - 84px);
26.   background-color: #edeff5;
27. }
28. </style>

复制代码

效果：

【注】vscode有一个插件：du-i18n，由于项目中须要更换的地方太多，假如手动自界说语言包工作量太大，以是保举一个vscode插件（du-i18n），它支持一键扫描中文，并提取到指定文件天生对应的语言包对象