应用国际化 (I18n)

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

TIP

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

手动设置

如果您错过了在quasar create向导中启用i18n,请按以下步骤手动进行设置。

  1. vue-i18n依赖项安装到您的应用程序中。
$ yarn add vue-i18n
// 或:
$ npm install vue-i18n
  1. 创建具有以下内容的src/boot/i18n.js文件:
import Vue from 'vue'
import VueI18n from 'vue-i18n'

import messages from 'src/i18n'

Vue.use(VueI18n)

const i18n = new VueI18n({
  locale: 'en-us',
  fallbackLocale: 'en-us',
  messages
})

export default ({ app }) => {
  // 在应用程序上设置i18n实例
  app.i18n = i18n
}

// i如果您需要从其他文件
// 导入它,则:
export { i18n }
  1. 在您的应用程序中创建一个文件夹(/src/i18n/),其中将包含您将支持的每种语言的定义。 示例:src/i18n。 请注意步骤2中的“import messages from ‘src/i18n’”。这是您编写要导入的内容的步骤。

  2. 现在在quasar.config.jsboot部分中引用该文件:

// quasar.conf.js
return {
  boot: [
    // ...
    'i18n'
  ],

  // ...
}

现在您可以在页面中使用它了。

在SFC中设置翻译块

要在带有vue-i18n-loader的vue文件中使用嵌入的<i18n>模板组件,必须确保使用您选择的包管理器将 @intlify/vue-i18n-loaderyaml-loader依赖项添加到您的项目中。 然后在您的quasar.conf.js文件中更改webpack构建选项。 在这种情况下,翻译以yaml格式存储在块中。

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

如何使用

主要有3种情况:

<template>
  <q-page>
    <q-btn :label="$t('mykey2')">
    {{ $t('mykey1') }}
    <span v-html="content"></span>
  </q-page>
</template>

<script>
export default {
  data() {
    return {
      content: this.$t('mykey3')
    }
  }
}
</script>
  1. HTML body中的mykey1
  2. 属性中的mykey2
  3. 以编程方式使用mykey3

新增语言

假设您要添加新的德语。

1.创建新文件src/i18n/de/index.js并在其中复制文件src/i18n/en-us/index.js的内容,然后更改语言字符串。 2.现在更改src/i18n/index.js并在其中添加新的de语言。

import enUS from './en-us'
import de from './de'

export default {
  'en-us': enUS,
  de: de
}

创建语言切换器

<!-- some .vue file -->

<template>
  <!-- ...... -->
  <q-select
    v-model="lang"
    :options="langOptions"
    label="Quasar Language"
    dense
    borderless
    emit-value
    map-options
    options-dense
    style="min-width: 150px"
  />
  <!-- ...... -->
</template>

<script>
export default {
  data() {
    return {
      lang: this.$i18n.locale,
      langOptions: [
        { value: 'en-us', label: 'English' },
        { value: 'de', label: 'German' }
      ]
    }
  },
  watch: {
    lang(lang) {
      this.$i18n.locale = lang
    }
  }
}
</script>

大写字母

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

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