国际化 (I18n)

国际化是一个设计过程，可确保产品（网站或应用程序）可适应各种语言和地区，而无需对源代码进行工程更改。将国际化视为本土化的准备。

处理网站/应用程序的推荐软件包是vue-i18n。应该注意，下面描述的是Quasar框架组件的国际化。 如果您需要国际化自己的组件，请阅读上面指出的文档并通过编辑位于<project>/src/i18n中的文件来配置项目。

以下是使用vue-i18n-loader在vue文件中使用vue-i18n嵌入式<i18n>模板组件的示例配方，您必须在quasar.conf.js中添加它。在这种情况下，翻译以yaml格式存储在块中。

// quasar.conf
build: {
  // 或者使用等价的chainWebpack（）
  // 和它自己的链语句（CLI v0.16.2 +）
  extendWebpack (cfg) {
    cfg.module.rules.push({
      resourceQuery: /blockType=i18n/,
      use: [
        {loader: '@kazupon/vue-i18n-loader'},
        {loader: 'yaml-loader'}
      ]
    })
    ...
  }
}

但是，在应用程序空间中处理I18n是不够的。Quasar组件也有自己的标签。一种选择是通过Quasar组件的每个实例（如QTable或QDatetime）上的标签属性来配置标签。这需要时间并为您的网站/应用程序增加不必要的复杂性。相反，请使用Quasar I18n（仅适用于Quasar组件！）系统。

有关可用语言的完整列表，请查看Github上的Quasar I18n。
如果您所需的语言不在该列表中，请随时提交PR以添加它。最多需要5到10分钟。我们非常欢迎任何语言！

配置默认语言

编辑/quasar.conf.js：

framework: {
  i18n: 'de'
}

动态改变语言

使用QSelect动态更改Quasar组件语言的示例：

<template>
  <q-select
    stack-label="I18n"
    :options="[
      { label: 'English (US)',         value: 'en-us' },
      { label: 'English (UK)',         value: 'en-uk' },
      { label: 'Romanian',             value: 'ro' },
      { label: 'Chinese (Simplified)', value: 'zh-hans' },
      { label: 'Italian',              value: 'it' }
      { label: 'Spanish',              value: 'es' }
      { label: 'French',               value: 'fr' }
      { label: 'German',               value: 'de' },
      { label: 'Russian',              value: 'ru' },
      .......
    ]"
    v-model="lang"
  />
</template>

<script>
export default {
  data () {
    return {
      lang: this.$q.i18n.lang
    }
  },
  watch: {
    lang (lang) {
      // 动态导入，因此只按需求加载
      import(`quasar-framework/i18n/${lang}`).then(lang => {
        this.$q.i18n.set(lang.default)
      })
    }
  }
}
</script>

在应用空间中使用Quasar I18n

虽然Quasar I18n仅为Quasar组件设计，但您仍然可以将其用于您自己的网站/应用程序组件。

"Close" label in current Quasar I18n language is:
{{ $q.i18n.label.close }}

检测区域设置

还有一种Quasar提供的开箱即用的方法可以确定用户区域：

// 在Vue文件之外
import Quasar from 'quasar'
Quasar.i18n.getLocale() // 返回字符串

// 在Vue文件之内
this.$q.i18n.getLocale() // 返回字符串

处理Quasar UMD

要添加Quasar语言包，您需要为Quasar版本添加语言包JS标签，并告诉Quasar使用它。 例如：

<!-- 在Quasar JS标签之后包含这个 -->
<script src="https://cdn.jsdelivr.net/npm/quasar-framework@latest/dist/umd/i18n.pt-br.umd.min.js"></script>
<script>
  Quasar.i18n.set(Quasar.i18n.ptBr)
</script>

通过使用$ vue init quasarframework/quasar-starter-kit-umd <文件夹>生成样本并指定Quasar I18n的语言代码（除默认的“en-us”外），查看需要包含在HTML文件中的标签。

Vue原型注入 RTL支持