Quasar语言包作用于Quasar自己组件的国际化，其中一些组件具有标签。

如上所述，一些Quasar组件有自己的标签。在国际化方面，一种选择是通过每个Quasar组件实例（如QTable）上的标签属性配置标签。这是您可以自定义文本以匹配所选语言的方法。但是，这会花费时间并为您的网站/应用添加不必要的复杂性。 相反，您可以使用Quasar语言包，其中包含许多标准标签定义，例如"Cancel", “Clear”, “Select”, "Update"等。无需再翻译这些！它开箱即用。

配置默认语言包

除非另有配置（见下文），否则Quasar默认使用en-us语言包。

硬编码

如果未动态确定默认的Quasar语言包（例如，不依赖于cookie），则可以：

Quasar CLI

编辑/quasar.conf.js:

framework: {
  lang: 'de'
}

Vue CLI

编辑你的main.js:

import langDe from 'quasar/lang/de'
// ...

// when not selecting to import all Quasar components:
import { Quasar } from 'quasar'
// OTHERWISE:
import Quasar from 'quasar'

// ...
Vue.use(Quasar, {
  // ...,
  lang: langDe
})

Quasar UMD

包含你的Quasar版本的语言包JS标签，并告诉Quasar使用它。 例：

<!-- 在Quasar JS之后包含这个标签 -->
<script src="https://cdn.jsdelivr.net/npm/quasar@1/dist/lang/de.umd.min.js"></script>
<script>
  Quasar.lang.set(Quasar.lang.de)
</script>

在UMD / Standalone页面上检查需要在HTML文件中包含哪些标签。

动态（非SSR）

Quasar CLI：如果必须动态选择所需的Quasar语言包（例如：依赖于cookie），则需要创建一个启动文件：$ quasar new boot quasar-lang-pack [--format ts]。 这将创建``/src/boot/quasar-lang-pack.js` 文件。 编辑为：

// for when you don't specify quasar.conf.js > framework: 'all'
import { Quasar } from 'quasar'
// OTHERWISE:
import Quasar from 'quasar'

export default async () => {
  const langIso = 'de' // ... some logic to determine it (use Cookies Plugin?)

  try {
    await import(
      /* webpackInclude: /(de|en-us)\.js$/ */
      'quasar/lang/' + langIso
      )
      .then(lang => {
        Quasar.lang.set(lang.default)
      })
  }
  catch (err) {
    // Requested Quasar Language Pack does not exist,
    // let's not break the app, so catching error
  }
}

然后将此启动文件注册到/quasar.conf.js：

boot: [
  'quasar-lang-pack'
]

动态（SSR）

v1.11+

在处理SSR时，我们不能使用单例对象，因为这会污染会话。 结果，与上面的动态示例相反（首先阅读它！），您还必须从启动文件中指定ssrContext：

// for when you don't specify quasar.conf.js > framework: 'all'
import { Quasar } from 'quasar'
// OTHERWISE:
import Quasar from 'quasar'

// ! NOTICE ssrContext param:
export default async ({ ssrContext }) => {
  const langIso = 'de' // ... some logic to determine it (use Cookies Plugin?)

  try {
    await import(
      /* webpackInclude: /(de|en-us)\.js$/ */
      'quasar/lang/' + langIso
      )
      .then(lang => {
        // ! NOTICE ssrContext param:
        Quasar.lang.set(lang.default, ssrContext)
      })
  }
  catch (err) {
    // Requested Quasar Language Pack does not exist,
    // let's not break the app, so catching error
  }
}

在运行时更改Quasar语言包

使用QSelect动态更改Quasar组件语言的示例：

<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>
import languages from 'quasar/lang/index.json'
const appLanguages = languages.filter(lang =>
  [ 'de', 'en-us' ].includes(lang.isoName)
)

export default {
  data () {
    return {
      lang: this.$q.lang.isoName
    }
  },

  watch: {
    lang (lang) {
      // dynamic import, so loading on demand only
      import(
        /* webpackInclude: /(de|en-us)\.js$/ */
        'quasar/lang/' + lang
        ).then(lang => {
        this.$q.lang.set(lang.default)
      })
    }
  },

  created () {
    this.langOptions = appLanguages.map(lang => ({
      label: lang.nativeName, value: lang.isoName
    }))
  }
}
</script>

在App Space中使用Quasar语言包

虽然Quasar语言包仅适用于Quasar组件内部使用，但您仍可以将其标签用于您自己的网站/应用程序组件。

当前Quasar语言包中的“Close”标签是：
{{ $q.lang.label.close }}

查看[GitHub]（https://github.com/quasarframework/quasar/tree/v1/ui/lang）上的Quasar语言包，查看$q.lang的结构。

检测区域设置

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

// outside of a Vue file

// for when you don't specify quasar.conf.js > 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