Vite2+Vue3学习笔记（四）：引入Vue-i18n并实现按钮切换页面语言

目录

参考链接

前言

项目码云Gitea地址

其他文章

四、引入Vue-i18n并实现按钮切换语言

1.安装vue-i18n

 package.json

2.准备语言文件

3.配置文件

4.全局配置

5.修改首页src/components/Main.vue

1）在Element Plus容器布局的例子基础上修改下拉菜单，增加单选按钮组和头像：

2）在setup()中使用vue-i18n：

3）修改单选按钮组和下拉菜单文本，渲染en_US.js中自定义的文本：

4）添加change事件监听单选按钮组，实现点击按钮切换自定义国际化文件的功能：

6. 配置Element Plus组件国际化

7.折腾系列之添加退出登录事件

8.折腾系列之替换首页el-main

---

参考链接

vue3.0配置vue-i18n - 易函123 - 博客园

vue3国际化如何使用vue-i18n以及解决切换语言不刷新的问题 - baifangzi - 博客园

前言

        本人职场小白，公司让学习Vite和Vue3并搭建项目Demo，借这个机会自己尝试写写博客，主要目的是搭项目，所以原理性的知识没有过多阐述，写博客时也根据步骤复现了，对于新手直接跟着操作就可以把项目搭起来，少走了很多弯路，希望对大家有帮助。

        文中参考链接都有附上，参考时可以看看，如果有任何错误或意见也欢迎大家指点。

项目码云Gitea地址

Vite-Demo: 使用vite2.0及vue3.0并集成Element Plus，开发后台管理系统demo。https://gitee.com/YG-CST/vite-demo

其他文章

Vite2+Vue3学习笔记（一）：Vue3.0项目搭建及配置过程_YGいくこさん的博客-CSDN博客

Vite2+Vue3学习笔记（二）：引入Vue-Router_YGいくこさん的博客-CSDN博客

Vite2+Vue3学习笔记（三）：引入Axios并调用后端接口_YGいくこさん的博客-CSDN博客

四、引入Vue-i18n并实现按钮切换语言

官网：Installation | Vue I18n

1.安装vue-i18n

npm i vue-i18n@next --save

•  package.json

{
  "name": "test-demo-1",
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "serve": "vite preview"
  },
  "dependencies": {
    "axios": "^0.24.0",
    "element-plus": "^1.2.0-beta.3",
    "sass": "^1.43.5",
    "scss": "^0.2.4",
    "vue": "^3.2.16",
    "vue-i18n": "^9.2.0-beta.20",
    "vue-router": "^4.0.12"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^1.9.3",
    "vite": "^2.6.4"
  }
}

2.准备语言文件

• src/lang/zh_CN.js

自定义中文文本。

const zh_CN = {
    nav: {
        chi: '简体中文',
        eng: '英语',
        personalCenter: '个人中心',
        logout: '退出登录',
    },
};
export default zh_CN;

• src/lang/en_US.js

自定义英文文本。

const en_US = {
    nav: {
        chi: 'CN',
        eng: 'EN',
        personalCenter: 'Personal Center',
        logout: 'Sign Out',
    },
};
export default en_US;

3.配置文件

• src/lang/index.js

import { createI18n } from 'vue-i18n';

// 自定义国际化文件
import zh_CN from './zh_CN';
import en_US from './en_US';

const i18n = createI18n({
    legacy: false, // Composition API 模式
    globalInjection: true, // 全局注册 $t方法
    // 默认语言
    locale: 'zh_CN',
    // 语言库
    messages: {
        zh_CN: zh_CN,
        en_US: en_US
    }
});

// 将i18n暴露出去，在main.js中引入挂载
export default i18n;

4.全局配置

• src/main.js

// 引入Vue-i18n
import i18n from './lang'

app.use(i18n);

5.修改首页src/components/Main.vue

1）在Element Plus容器布局的例子基础上修改下拉菜单，增加单选按钮组和头像：

官网：Container 布局容器 | Element Plus

2）在setup()中使用vue-i18n：

3）修改单选按钮组和下拉菜单文本，渲染en_US.js中自定义的文本：

    
      {{ $t("nav.chi") }}
      {{ $t("nav.eng") }}
    
    
      
      
    

4）添加change事件监听单选按钮组，实现点击按钮切换自定义国际化文件的功能：