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

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

配置默认语言包

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

硬编码

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

Quasar CLI

编辑/quasar.config.js:

framework: {
  lang: 'de'
}

Quasar Vite插件

编辑你的main.js:

// ...
import { Quasar } from 'quasar'
// ...
import langDe from 'quasar/lang/de'
// ...
app.use(Quasar, {
  // ...,
  lang: langDe
})

Vue CLI

Edit your main.js:

// ...
import { Quasar } from 'quasar'
// ...
import langDe from 'quasar/lang/de'
// ...
app.use(Quasar, {
  // ...,
  lang: langDe
})

Quasar UMD

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

<!-- 在Quasar JS之后包含这个标签 -->
<script src="https://cdn.jsdelivr.net/npm/quasar@2/dist/lang/de.umd.prod.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` 文件。 编辑为：

// -- With @quasar/app-vite --

import { Quasar } from 'quasar'

// relative path to your node_modules/quasar/..
// change to YOUR path
const langList = import.meta.glob('../../node_modules/quasar/lang/*.mjs')
// or just a select few (example below with only DE and FR):
// import.meta.glob('../../node_modules/quasar/lang/(de|fr).mjs')

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

  try {
    langList[ `../../node_modules/quasar/lang/${ langIso }.mjs` ]().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
  }
}

// -- With @quasar/app-webpack --

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.config.js：

boot: [
  'quasar-lang-pack'
]

动态（SSR）

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

// -- With @quasar/app-vite --

import { Quasar } from 'quasar'

// relative path to your node_modules/quasar/..
// change to YOUR path
const langList = import.meta.glob('../../node_modules/quasar/lang/*.mjs')
// or just a select few (example below with only DE and FR):
// import.meta.glob('../../node_modules/quasar/lang/(de|fr).mjs')

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

  try {
    langList[ `../../node_modules/quasar/lang/${ langIso }.mjs` ]().then(lang => {
      Quasar.lang.set(lang.default, ssrContext)
    })
  }
  catch (err) {
    // Requested Quasar Language Pack does not exist,
    // let's not break the app, so catching error
  }
}

// -- With @quasar/app-webpack --

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 => {
      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 { useQuasar } from 'quasar'
import languages from 'quasar/lang/index.json'
import { ref, watch } from 'vue'

const appLanguages = languages.filter(lang =>
  [ 'de', 'en-US' ].includes(lang.isoName)
)

const langOptions = appLanguages.map(lang => ({
  label: lang.nativeName, value: lang.isoName
}))

export default {
  setup () {
    const $q = useQuasar()
    const lang = ref($q.lang.isoName)

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

    return {
      lang,
      langOptions
    }
  }
}
</script>

在App Space中使用Quasar语言包

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

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

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

检测区域设置

还有一种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
}