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

手动设置

如果您错过了在yarn create quasar(或 npm init quasar)向导中启用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 }) => {
  // 创建I18n实例
  const i18n = createI18n({
    locale: 'en-US',
    globalInjection: true,
    messages
  })

  // 告诉应用程序使用I18n实例
  app.use(i18n)
}

3. 在您的应用程序中创建一个文件夹（/src/i18n/），其中将包含您将支持的每种语言的定义。 示例：src/i18n。 请注意步骤2中的“import messages from ‘src/i18n’”。这是您编写要导入的内容的步骤。

4. 现在在quasar.config.js的boot部分中引用该文件：

// 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
}