多语言国际化

国际化是指在不修改代码的情况下使网站/应用程序可以适应各种语言和地区。

手动安装

如果您在创建项目的时候勾选了vue-i18n，那么您的项目中已经被安装了vue-i18n，并且已经准备好了相关的配置，您可以直接跳转到如何使用，如果没有的话按照下述步骤来安装：

1. 安装 vue-i18n 依赖。

 yarn add vue-i18n@next
// 或者:
 npm install vue-i18n@next

2. 创建 src/boot/i18n.js 文件，并将下述内容复制进去:

import { createI18n } from 'vue-i18n'
import messages from 'src/i18n'

export default ({ app }) => {
  // 创建实例
  const i18n = createI18n({
    locale: 'en-US',
    legacy: false, // 如果不使用组合式 API，请对此进行注释
    messages
  })

  // 注册到 vue 中
  app.use(i18n)
}

3. 创建一个文件夹 (/src/i18n/) 用于存放支持的多语言文案。 例如: src/i18n。 注意第二步的 import messages from 'src/i18n' 。

4. 记得在 quasar.config.js 中引用这个 boot 文件 in the boot section:

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

  // ...
}

现在已经准备好了，可以在项目中使用了

配置在 SFC 中支持<i18n>翻译标签

如果您想在 SFC（单文件组件）中使用<i18n>标签，还需要做下述配置：

先安装 @intlify/vue-i18n-loader:

yarn add --dev @intlify/vue-i18n-loader
# or
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. mykey1 演示了如何在 HTML 内容中使用
2. mykey2 演示了如何在 HTML 的标签属性上使用
3. mykey3 演示了如何在 js 中使用

添加新的语言

下面讲述如何添加一个新的语言

1. 创建新的文件 src/i18n/zh-CN/index.js，并将 src/i18n/en-US/index.js 文件中的内容拷贝过去，然后修改对应的文案字段。
2. 将新的语言添加到 src/i18n/index.js 文件中。

import enUS from './en-US'
import zhCN from './zh-CN'

export default {
  'en-US': enUS,
  'zh-CN': zhCN
}

语言切换示例

<!-- 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 { ref, watch } from 'vue'
import { useI18n } from 'vue-i18n'

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

    return {
      locale,
      localeOptions: [
        { value: 'en-US', label: 'English' },
        { value: 'zh-CN', label: '中文' }
      ]
    }
  }
}
</script>

UPPERCASE

许多语言，如希腊语、德语和荷兰语，对于大写显示都有不直观的规则，并且有一些少见的情况您应该知道：

QBtn 组件会使用text-transform: uppercase CSS 属性来将它的 label 自动转换为全部大写，按照MDN webdocs的规范，“页面的语言应该被在定义在 html/xml 的 lang 属性中”，但是这个属性的浏览器兼容性不是很好，另外 2017 年 ISO 标准的大写德语 ß 字母还没有进入标准，目前有两种方案：

1. 使用no-caps属性，放弃自动大写特性，自行绑定 label。
2. 使用no-caps属性，借助$q.lang.getLocale()重写 String 的toLocaleUpperCase方法。

检测地区

Quasar 也提供了一些开箱即用的方法来检测用户所在的地区：

// 在 Vue 文件之外使用
import { Quasar } from 'quasar'
Quasar.lang.getLocale() // returns a string

// 在 Vue 文件之内
import { useQuasar } from 'quasar'

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