Vue3 多语言 Vue-I18n国际化

一、官网及完整代码地址

官方文档：Vue I18n

完整代码地址：front-manager/src/view/login/index.vue · cheinlu/土拨鼠充电系统 - Gitee.com 

二、实现步骤：

2.1、安装vue-i18n

//必须是9以上版本
npm install vue-i18n@9

2.2、配置

①在 src 目录下新建 lang文件夹

②lang文件夹中新建 index.ts 文件

//引入i18n
import { createI18n } from 'vue-i18n'
import enLocale from './en/index'
import zhLocale from './zh/index'

//创建i18n对象
const i18n = createI18n({
  locale:localStorage.getItem('lang') || "zh", //默认显示的语言 
  fallbackLocale: localStorage.getItem('lang') || "zh",//预设语言环境
  globalInjection: true, //全局生效$t
  legacy:false,
  messages:{
    zh: zhLocale,
    en: enLocale,
  }
})

export default i18n

③lang文件夹中新建中文zh和英文en语言包：内容根据语言需要写

//zh 中文语言包
export default {
  login:{
    welcome:'欢迎来到 土拨鼠充电平台',
    account:'没有账号',
    register:'去注册',
    tenement:'租户',
    tenements: '请选择租户',
    text:'登录',
    language:'语言',
    chinese:'中文',
    english:'英文',
    usernamePlaceholder: '请输入用户名',
    passwordPlaceholder: '请输入密码',
    verificationCode:'请输入验证码',
    accounts:'账户',
    password:'密码',
    code:'验证码'
    
  }
}

//en英文语言包
export default {
  login:{
    welcome:'Welcome to the groundhog charging platform',
    account:'No account',
    register:'To register',
    tenement:'Tenant',
    tenements: 'Please select a tenant',
    text:'login',
    language:'language',
    chinese:'Chinese',
    english:'English',
    usernamePlaceholder: 'Please enter your username',
    passwordPlaceholder: 'Please enter your password',
    verificationCode:'Please enter the verification code',
    accounts:'Account',
    password:'Password',
    code:'Code'
  }
}

 ④在main.ts中引入

import App from '@/App.vue'
import { createApp } from 'vue'
//引入i18n
import i18n from '@/lang/index'

const app = createApp(App)

//安装i18n
app.use(i18n)

app.mount('#app')

 2.3、挂载全局方法$t以方便在ts中使用

//login.vue页面

2.4、点击语言切换按钮进行中英文切换

备注：切换语言时进行了本地存储，刷新页面时可以持久化存储当前语言状态

//login.vue页面 结构
 

 2.5、在 template模板中使用，直接使用全局方法$t

        

          Hello
          {{ $t('login.account') }}？{{ $t('login.register') }}
        
        
{{ $t('login.welcome') }}
        
          
            
          
        
        
          
        
        
          
        
        
          
        
        

          
        
          {{ $t('login.text') }}
      

三、效果展示：中英文切换