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

手动设置

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

1. 将vue-i18n依赖项安装到您的应用程序中。

$ yarn add vue-i18n
// 或:
$ npm install vue-i18n

2. 创建具有以下内容的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 }

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

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

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

  // ...
}

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

在SFC中设置翻译块

要在带有vue-i18n-loader的vue文件中使用嵌入的<i18n>模板组件，必须确保使用您选择的包管理器将 @intlify/vue-i18n-loader和 yaml-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