【Vue I18n 国际化插件】vue3+vue-i18n 项目实战总结

生活、追梦者

已于 2024-04-11 18:22:34 修改

阅读量1.2w

点赞数 35

分类专栏： vue3全家桶 JavaScript 文章标签： vue.js 前端 javascript 前端框架

于 2024-04-08 11:31:16 首次发布

本文链接：https://blog.csdn.net/weixin_45046532/article/details/137501163

版权

一、为什么要国际化？

前端国际化：应用要服务于不同的地区的用户，所以应用不能单一语言；应用要能让不同地区的人无障碍使用就需要实现国际化。目前在各大商城项目中，对于国际化语言的需求越来越高了，其中最多的就是 vue 项目使用 i18n 插件实现多语言切换功能。

前端国际化：应用要服务于不同的地区的用户，所以应用不能单一语言；应用要能让不同地区的人无障碍使用就需要实现国际化。目前在各大商城项目中，对于国际化语言的需求越来越高了，其中最多的就是 vue 项目使用 i18n 插件实现多语言切换功能。

二、插件基本思路

定义语言包：需要几种语言展示，就定义几个语言包。
组合语言包对象：创建对象，对语言包进行组合，对象的 key 为语言包引用，值为语言包对象。
创建实例：创建 vue-i18n 类的对象，添加 message 和 locale 属性。
挂载：挂载创建的实例对象。

三、插件版本适用框架

vue-i18n 作为国际化插件，它主要有两个版本：v8 和 v9。v8 版本适用于 Vue2 框架，v9 版本适用于 Vue3 框架。具体区别可以查看官网，以下内容均在 Vue3 中使用。

四、项目实战

1、安装插件 vue-i18n

npm install vue-i18n --save

或

yarn add vue-i18n --save

2、创建文件，进行相关配置

1.在 src 目录下，新建 i18n 文件夹 2.在 i18n 文件夹中，新建 lang 文件夹(en.ts 、zh-cn.ts)、index.ts 文件
在这里插入图片描述
en.ts

export default {
   
  home: {
   
    name: 'home',
  },
  tabs: {
   
    work: 'Work',
    private: 'Private',
    collect: 'Collect',
    like: 'Like',
  },
}

zh-cn.ts

export default {
   
  home: {
   
    name: '首页',
  },
  tabs: {
   
    work: '作品',
    private: '私密',
    collect: '收藏',
    like: '喜欢',
  },
}

index.ts

import {
    createI18n } from 'vue-i18n'
// 语言包
import zhCn from './lang/zh-cn'
import en from './lang/en'

const i18n = createI18n({
   
  legacy:

最低0.47元/天解锁文章