Vue3 多语言 Vue-I18n国际化

一、官网及完整代码地址

官方文档👉👉：Vue I18n

✍GitHub完整代码地址👉：https://github.com/cheinlu/groundhog-charging-system/blob/master/front-manager/src/view/login/index.vue

✍Gitee完整代码地址👉：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页面
<script setup lang="ts">

import { reactive, ref, getCurrentInstance, onMounted } from 'vue'

//getCurrentInstance函数获取当前组件实例,并通过.appContext.config.globalProperties访问全局属性
//?号表示前面如果返回null，后面不执行
let $this = getCurrentInstance()?.appContext.config.globalProperties as any

</script>

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

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

//login.vue页面 结构
 <template #dropdown>
    <el-dropdown-menu>
    <el-dropdown-item @click="changeZh">{{ $t('login.chinese') }}</el-dropdown-item>
    <el-dropdown-item @click="changeEn">{{ $t('login.english') }}</el-dropdown-item>
    </el-dropdown-menu>
</template>


<script setup lang="ts">
import { getCurrentInstance } from 'vue'

//getCurrentInstance函数获取当前组件实例,并通过.appContext.config.globalProperties访问全局属性
//?号表示前面如果返回null，后面不执行
let $this = getCurrentInstance()?.appContext.config.globalProperties as any

//切换中文，存储语言状态
const changeZh = () => {
  $this.$i18n.locale = 'zh'
  localStorage.setItem('lang', 'zh')
}
//切换英文，存储语言状态
const changeEn = () => {
  $this.$i18n.locale = 'en'
  localStorage.setItem('lang', 'en')
}
</script>

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

<el-form ref="loginForms" :model="loginForm" :rules="rules" label-width="65px">
        <h1 class="title">
          Hello
          <span
            >{{ $t('login.account') }}？<span class="register" @click="goRegister">{{ $t('login.register') }}</span></span
          >
        </h1>
        <h2>{{ $t('login.welcome') }}</h2>
        <el-form-item :label="$t('login.tenement')">
          <el-select v-model="selectedTenantId" @click="teSelect" @change="getSelectedTenantName" :placeholder="$t('login.tenements')">
            <el-option v-for="item in useStore.teArr" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="username" :label="$t('login.accounts')">
          <el-input :prefix-icon="User" v-model="loginForm.username" :placeholder="$t('login.usernamePlaceholder')"></el-input>
        </el-form-item>
        <el-form-item prop="password" :label="$t('login.password')">
          <el-input type="password" :prefix-icon="Lock" show-password v-model="loginForm.password" :placeholder="$t('login.passwordPlaceholder')"></el-input>
        </el-form-item>
        <el-form-item :label="$t('login.code')">
          <el-input :placeholder="$t('login.verificationCode')" v-model="sidentifyMode"></el-input>
        </el-form-item>
        <div @click="refreshCode" style="text-align: center; margin-bottom: 10px;">
          <SIdentify :identifyCode="identifyCode"></SIdentify>
        </div>
          <el-button class="login_btn" type="primary" size="default" @click="login">{{ $t('login.text') }}</el-button>
      </el-form>

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