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文件夹
(示例):
如图所示:
- 在src文件夹中新建I18n文件夹与Index.ts文件
- i18n文件夹下新建lang与login文件夹
- lang文件夹中存放着框架部分的国际化
- 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
总结
就这样~~~~~~