Vue3 + Element Plus + i18n 国际化

小迷糊MJ

已于 2022-08-29 16:33:44 修改

阅读量1.2k

点赞数

分类专栏：学习笔记文章标签： vue.js javascript 前端

于 2022-08-29 16:32:24 首次发布

本文链接：https://blog.csdn.net/Mjxiaomihu/article/details/126585982

版权

本文介绍了如何在Vue3项目中结合Element Plus进行国际化(i18n)设置，包括安装vue-i18n，创建并配置cn.ts和en.ts文件，注册i18n到main.ts，引入app.vue，模板中使用，以及实现语言切换功能。

摘要由CSDN通过智能技术生成

1、安装 vue-i18n

npm install vue-i18n

2、在src目录下新建i18n文件夹

(1) 在i18n文件夹下创建cn.ts

let zhCn = {
    language: {
        cn: "简体中文",
        en: "英文"
    },
    header:{
        home:"首页"
    }
}
export default zhCn;

（2）在i18n文件夹下创建en.ts

let EN = {
    language: {
        cn: "Chinese",
        en: "English"
    },

    header:{
        home:"home"
    }
}
export default EN;

(3)在 i18n文件夹下新建 index.ts

import { createI18n } from 'vue-i18n';
import zhCn from "./cn" ;
import EN from "./en" ;


const i18n = createI18n({
    locale: 'zhCn',// 默认语言
    silentFallbackWarn: true,// 关闭控制台警告
    globalInjection: true, // 全局模式，可以直接使用 $t
    locale: localStorage.ge