VUE3+i18n 项目语言国际化

VUE3+i18n 项目语言国际化`

项目框架:
Vue3+VIte+Element Plus+i18n

---

提示：此文章为个人项目搭建知识点记录，只记录用法不探寻底层原理

---

前言

日常项目搭建过程中用到的知识点用法进行记录，温故而知新

---

一、VUE中的I18N是什么？

Vue官网中的介绍:Vue I18n 是 Vue.js 的国际化插件。它可以轻松地将一些本地化功能集成到你的 Vue.js 应用程序中

二、使用步骤

1.引入i18n库

代码如下：

npm install vue-i18n@next

2.创建I18n文件夹

（示例）：

如图所示：

1. 在src文件夹中新建I18n文件夹与Index.ts文件
2. i18n文件夹下新建lang与login文件夹
3. lang文件夹中存放着框架部分的国际化
4. Login文件夹中存放着各界面部分的国际化

在lang文件夹和login文件夹中都创建zh-cn(中）/en(英).ts文件

Index.ts为i18n语言包处理

---

3.具体示例

zh-cn/en.ts定义自定义语言项


Index.ts 创建i18n实例并进行导出

index.ts代码：

import { createI18n } from 'vue-i18n' //引入vue-il8n组件
import { store } from '../store/index'

//Element-plus 
import zhcnLocale from 'element-plus/lib/locale/lang/zh-cn';
import enLocale from 'element-plus/lib/locale/lang/en';

//自定义
import nextZhcn from '../i18n/lang/zh-cn'
import nextEn from '../i18n/lang/en'

//login国际化内容
import loginZhcn from '@/i18n/login/zh-cn'
import loginEn from '@/i18n/login/en'

//定义语言国际化内容
/**
 * 说明
 * /src/i18n/lang 下的ts文件为框架的国际化内容
 * /src/i18n/pages 下的ts文件为各界面的国际化内容
 * 注意
 * 各界面国际化内容添加自定义完成之后需要添加进Messages对象zhcnLocale.name和enLocale.name中
*/
const messages={
    //中文
    [zhcnLocale.name]:{
        ...zhcnLocale,
        message:{
            ...nextZhcn,
            ...loginZhcn
        }
       },
   //英文
    [enLocale.name]:{
        ...enLocale,
        message:{
            ...nextEn,
            ...loginEn
        }
    }
}

//注册i18n实例并导出
export const i18n=createI18n({
    legacy: false,//解决Not available in legacy mode报错
    locale:store.state.themeConfig.themeConfig.globalI18n,//默认显示的语言
    fallbackLocale:enLocale.name,//没有英文的时候默认中文语言
    globalInjection:true,
    messages, //引入语言文件
    silentFallbackWarn: true//抑制警告
})

4.全局注入使用

main.ts中引入Index.ts

5.页面使用

用法一.
在element plus 组件库中直接使用 $t(‘自定义语言’) 进行使用

用法二.
在setup(）中进行使用 用 t() 进行使用

主要注意到的是message.login对应的部分如图：

6.大概效果

英文:

中文:

三、可能遇到的问题

问题一：

You are runing the esm-bundler of vue-i18n. It is recommended to configure your…

解决办法:

在vite.config.ts中添加

'vue-i18n': 'vue-i18n/dist/vue-i18n.cjs.js'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import * as path from 'path'

const alias:Record<string,string>={
  '@': path.resolve(__dirname, './src'),
  //解决You are running the esm-bundler build of vue-i18n. It is recommended to configure your bundler to explicitly replace feature flag globals with boolean literals to get proper tree-shaking in the final bundle
	'vue-i18n': 'vue-i18n/dist/vue-i18n.cjs.js',
};

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: { alias }
  // optimizeDeps: {
  //   include: ['element-plus/lib/locale/lang/zh-cn', 'element-plus/lib/locale/lang/en'],
  // },
})

问题二.

解决办法:

在i18n/index.ts中加上

legacy: false

---

总结

就这样~~~~~~