我们可以通过$t('变量')这种方式，在页面里面使用国际化，如下所示：

<template>
  <el-form ref="loginFormRef" :model="loginForm" :rules="loginRules" @keyup.enter="onLogin">
    <div class="login-title">{{ $t('app.signIn') }}</div>
    <el-form-item prop="username">
      <el-input v-model="loginForm.username" :prefix-icon="User" :placeholder="$t('app.username')"></el-input>
    </el-form-item>
    <el-form-item prop="password">
      <el-input v-model="loginForm.password" :prefix-icon="Lock" show-password :placeholder="$t('app.password')"></el-input>
    </el-form-item>
    <el-form-item prop="captcha" class="login-captcha">
      <el-input v-model="loginForm.captcha" :placeholder="$t('app.captcha')" :prefix-icon="Key"></el-input>
      <img :src="captchaBase64" @click="onCaptcha" />
    </el-form-item>
    <el-form-item class="login-button">
      <el-button type="primary" @click="onLogin()">{{ $t('app.signIn') }}</el-button>
    </el-form-item>
  </el-form>
</template>

• 上面的国际化配置文件，如下所示：

// zh-CN.ts
export default {
  app: {
    signIn: '登录',
    username: '用户名',
    password: '密码',
    captcha: '验证码'
  }
}

// en-US.ts
export default {
  app: {
    signIn: 'Sign in',
    username: 'Username',
    password: 'Password',
    captcha: 'Captcha'
  }
}