vue3.0国际化+i18n

1、i18n安装

npm install vue-i18n

2、在src下创建文件夹language及zh_CN.js、en_US.js、index.js

image.png

en_US.js

export default {
  header_menu: {
    logout: 'Sign Out',
    dataManagement: 'DataManagement',
    cancelAccount: 'Login Out',
    changePassword: 'Change Password',
    oldPassword: 'Old Password',
    newPassword: 'New Password',
    newOldPassword: 'The new password cannot be the same as the old password!',
    updatePasswordSuccess: 'Password changed successfully!',
  },
}

zh_CN.js

export default {
  header_menu: {
    logout: '退出',
    dataManagement: '数据管理',
    cancelAccount: '注消账号',
    changePassword: '修改密码',
    oldPassword: '旧密码',
    newPassword: '新密码',
    newOldPassword: '新密码不能与旧密码相同！',
    updatePasswordSuccess: '修改密码成功！',
  },
}

index.js

import { createI18n } from 'vue-i18n'
import zhCN from './lang/zh_CN'
import enUS from './lang/en_US'

const i18n = createI18n({
//languageLocale 配置的全局变量，控制语言
  locale: languageLocale, // 默认显示语言
  messages: {
    'zh_CN': {
      ...zhCN
    }, // 中文
    'en_US': {
      ...enUS
    } // 英文

  }
})

export default i18n

main.js

import i18n from './language'
import ElementPlus from 'element-plus'
import elementZhLocale from 'element-plus/lib/locale/lang/zh-cn'
import elementEnLocale from 'element-plus/lib/locale/lang/en'
const app = createApp(App)

app.use(i18n)
app.use(ElementPlus, {
  locale: languageLocale === 'zh_CN' ? elementZhLocale : elementEnLocale,
})