应用国际化 (I18n)

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

TIP

处理网站/应用程序的推荐软件包是vue-i18n。 应该通过启动文件添加此包。 在启动文件文档页面上,您可以看到插入vue-i18n的具体示例。

在SFC中设置翻译块

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

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

大写字母

许多语言,如希腊语,德语和荷兰语都有大写显示的非直观规则,你应该注意一个边缘情况:

QBtn组件将使用CSStext-transform:uppercase规则自动将其标签转换为全部大写。根据MDN webdocs,“语言由lang HTML属性或xml:lang XML属性定义“。不幸的是,这在各个浏览器中都有不稳定的实现,大写的德语eszett ß的2017 ISO标准还没有真正进入正典。目前您有两种选择:

1.在你的标签中使用no-caps属性并写出应该出现的字符串 2.在标签中使用no-caps属性并通过this.$q.lang.getLocale()检测到的语言环境使用toLocaleUpperCase重写字符串

检测区域设置

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

// outside of a Vue file

// for when you don't specify quasar.conf > framework: 'all'
import { Quasar } from 'quasar'
// OTHERWISE:
import Quasar from 'quasar'

Quasar.lang.getLocale() // returns a string

// inside of a Vue file
this.$q.lang.getLocale() // returns a string

WARNING

如果你使用Quasar的set方法(this.$q.lang.set()),这将不会被Quasar的getLocale反映出来。 原因是getLocale()将始终返回用户的 区域设置(基于浏览器设置)。 set()方法引用Quasars内部语言环境设置,用于确定要使用的语言文件。 如果你想看看使用set()设置了哪种语言,你可以使用this.$q.lang.isoName