多语言配置

vue3版本集成 vue-i18n 实现多语言支持

使用方法

1. 模板中使用

框架已经全局注册$t方法，所以可以在模板中直接使用，如下：

<div>{{ $t('login.title') }}</div>

2. vue script中使用

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

let title = i18n.t('route.dashboard');

3. 普通js代码中使用

如果在普通的js（非vue component）代码中使用，需要使用 i18n.global.t 方法。

import i18n from '@/i18n'

let title = i18n.global.t('route.dashboard');

配置说明

界面显示的文本，在 src\i18n\langs\ 文件夹中配置，目前支持中文、英文。以 zh-cn.js 为例：

export default {
  login: {
    title: 'OpenAuth.Net Vue3版',
    logIn: '登 录',
    username: '账号',
    password: '密码',
    usernamePlaceholder: '请输入登录账号',
    oauthLoginTip: '接口服务器启用了Oauth认证，请点击这里登录',
    tips: {
      system: '默认System登录后，你可以无法无天',
      admin: 'admin/admin登录后，会少一点权限，资源管理/分类管理的字段会少一点',
      test: 'test/test登录后，权限会更少,资源管理/分类管理的字段会更少'
    }
  },
  tagsView: {
    refresh: '刷新',
    close: '关闭',
    closeOthers: '关闭其它',
    closeAll: '关闭所有'
  },
  common: {
    language: '语言',
    welcome: '欢迎您，',
    ok: '确定',
    cancel: '取消',
  },
  language: {
    zh: '简体中文',
    en: '英文'
  },
  dashboard: {
    siteInfo: '为了大家体验的一致性，数据库每1小时还原一次。不同于其他基于Element框架界面的花里胡哨，各种大按钮大缝隙，我们的原则：美观大方、简洁易用',
    footer: {
      copyright: '最好用的.Net权限工作流框架',
      officialWebsite: '官方网站'
    }
  }
}

注意事项

• 使用嵌套对象结构组织翻译项
• 参数化文本使用 {param} 语法