应用国际化 (i18n)

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

TIP

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

WARNING

Quasar文档假定你已经熟悉了vue-i18n。下面我们只描述了如何在Quasar CLI项目中使用它的基本原理。对于其功能的完整列表,请访问Vue I18n 文档

手动设置

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

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

export default ({ app }) => {
  // 创建I18n实例
  const i18n = createI18n({
    locale: 'en-US',
    globalInjection: true,
    messages
  })

  // 告诉应用程序使用I18n实例
  app.use(i18n)
}
  1. 在您的应用程序中创建一个文件夹(/src/i18n/),其中将包含您将支持的每种语言的定义。 示例:src/i18n。 请注意步骤2中的“import messages from ‘src/i18n’”。这是您编写要导入的内容的步骤。

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

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

  // ...
}

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

在SFC中设置翻译块

如果我们想在Quasar CLI项目的SFC(单文件组件)内添加对<i18n>标签的支持,那么我们需要修改现有的配置。

我们首先安装@intlify/vue-i18n-loader包:

$ yarn add --dev @intlify/vue-i18n-loader
# 或
$ npm i --save-dev @intlify/vue-i18n-loader

然后我们在项目的根部编辑quasar.config.js。我们必须包括以下内容:

// quasar.config.js

const path = require('path')

build: {
  chainWebpack: chain => {
    chain.module
      .rule('i18n-resource')
        .test(/\.(json5?|ya?ml)$/)
          .include.add(path.resolve(__dirname, './src/i18n'))
          .end()
        .type('javascript/auto')
        .use('i18n-resource')
          .loader('@intlify/vue-i18n-loader')
    chain.module
      .rule('i18n')
        .resourceQuery(/blockType=i18n/)
        .type('javascript/auto')
        .use('i18n')
          .loader('@intlify/vue-i18n-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="locale"
    :options="localeOptions"
    label="Quasar Language"
    dense
    borderless
    emit-value
    map-options
    options-dense
    style="min-width: 150px"
  />
  <!-- ...... -->
</template>

<script>
import { useI18n } from 'vue-i18n'

export default {
  setup () {
    const { locale } = useI18n({ useScope: 'global' })

    return {
      locale,
      localeOptions: [
        { value: 'en-US', label: 'English' },
        { value: 'de', label: 'German' }
      ]
    }
  }
}
</script>

大写字母

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

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

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

检测区域设置

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

// outside of a Vue file
import { Quasar } from 'quasar'
Quasar.lang.getLocale() // returns a string

// inside of a Vue file
import { useQuasar } from 'quasar'

setup () {
  const $q = useQuasar()
  $q.lang.getLocale() // returns a string
}

WARNING

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