Vue3项目中英文多语言切换（antd、element等组件库都可以使用）_vue页面如何转换成中文

首先我们需要知道vue里进行语言切换需要用到 vue-i18n 插件 

插件官网：Getting started | Vue I18n

其次，初学者经常会理解的误区：认为下载了插件后就可以自动将全篇项目都进行语言切换。。其实不然，每当增加页面或者功能字段之类的，都需要将其进行语言配置。博主将把详细步骤以及代码都放在下面，大家捋清楚后直接粘贴复用即可。

UI要我实现的效果如图：

已实现的效果： 

 1.安装插件

npm install vue-i18n@next 

2.在src下创建 lang 文件夹，并在该文件下创建  index.js、i18n.js、以及要翻译的内容文件，如图：

3.lang 文件夹下面的两个语言文件内容代码：

 中文简体文件（zh-CN.js 文件）

const zhCN ={
  message:{
    'upload':'上传',
    'placeholderTips':'请输入',
    'home':'首页',
    'tenantManagement':'租户管理',
    'berthManagement':'铺位管理',
    'berthInformation':'铺位信息',
    'berthRental':'铺位租赁',
    'operationManagement':'运营管理',
    'waterElectricity':'水电抄表',
    'chargeMent':'收费管理',
    'noticeMent':'公告发布',
    'dataCenter':'数据中心',
    'investmentManagement':'招商管理',
    'managementEnd':'管理端',
    'merchantEnd':'商户端',
    'personnelManagement':'人事管理',
    'department':'部门管理',
    'peopleManagement':'人员管理',
  }
}
export default zhCN

 英文文件（en.js 文件）

const en ={
  message:{
    'upload':'upload',
    'placeholderTips':'please Enter',
    'home':'Home',
    'tenantManagement':'Tenant Management',
    'berthManagement':'Berth management',
    'berthInformation':'Berth information',
    'berthRental':'Rental of berths',
    'operationManagement':'Operation Management',
    'waterElectricity':'Water and electricity meter reading',
    'chargeMent':'Charge',
    'noticeMent':'Notice',
    'dataCenter':'Data center',
    'investmentManagement':'Investment Management',
    'managementEnd':'Management end',
    'merchantEnd':'Merchant end',
    'personnelManagement':'Personnel management',
    'department':'Department',
    'peopleManagement':'Personnel management',
  }
}
export default en

 这里大家会发现这两个文件其实就是暴露一个对象（没错就是这样理解）

4. lang 文件夹下面的  index.js文件

import en from './en'
import zhCN from './zh-CN'
 
//导出所有翻译内容
export default {
  en, zhCN
}

5. lang 文件夹下面的  i18n.js文件

import { createApp } from 'vue'
//这里注意引入的App.vue文件路径，确保文件成功被引进来
import App from '../App.vue'
 
import { createI18n } from 'vue-i18n'
import message from './index'
 
 
const app = createApp(App)
 
const i18n = createI18n({
  legacy: false, //处理报错Uncaught (in promise) SyntaxError: Not available in legacy mode (at message-compiler.esm-bundler.js:54:19)
  locale: localStorage.getItem('lang') || "zhCN", // 注意locale属性！
  message
})
 
export default function (app) {
  app.use(i18n)
}

6.在 main.js 中挂载

 现在我们差不多就基本完成啦~现在将他们应用到页面进行使用即可

注意：下述方法都必须在当前页面的 script标签 内加上这两行代码（否则功能无法实现）

import { useI18n } from 'vue-i18n'
const { t } =useI18n()

• 在 template 中使用多语言

<span>{{ $t("message.upload") }}</span>

• 在 template 中的数据绑定使用多语言

<a-input type="text" :placeholder="$t('message.placeholderTips')" />
<!--这里标签使用的是antdVue组件库的input标签，用element组件库的话改一下对应的input标签即可-->

• 在 script 中使用多语言

console.log('t("messages.upload")', t("message.upload"))

• 在路由里使用多语言（面包屑同理）这里注意要先找到当前项目路由表定义的位置，如图所示：
  • 注意：这个路由表文件内并不需要再做其他操作，改一下 label 的值即可，用其他框架的小伙伴也不用担心这里会出错，只要找到菜单对应显示的字段就可以，我用的antdvue组件库是通过 label字段 来展示菜单名称的

 上图是我的路由表，之前 label 写的就是菜单的名称，由于菜单也需要进行中英文切换，所以将它改成我们之前在翻译语言文件内定义的值就行，下图就是我们之前定义好的翻译语言文件

 总结：此功能不会关乎到框架而存在差异问题，任何框架都可以使用上述的代码哦，因为这是使用的插件进行处理的，在项目工作中也会比较常用，有任何问题可以随时给博主私信或者文章下方留言哦~