Skip to page content

Quasar 语言包

选项与辅助工具
RTL 支持
选项与辅助工具
应用国际化

Quasar 语言包是针对 Quasar 自身组件的国际化方案，因为其中一些组件包含文案标签。

Loading Lang API...

WARNING

需要注意的是，下面描述的是 Quasar 组件自身的国际化。如果您需要对自己的组件进行国际化，请阅读 App Internationalization 文档页面。

如上所述，部分 Quasar 组件包含文案标签。在国际化方面，一种方式是为每个 Quasar 组件实例（如 QTable）逐一通过 label 属性配置对应语言的文案。这虽然可行，但耗时且增加不必要的复杂度。更好的方式是使用 Quasar 语言包，其中已经为您翻译好了大量标准标签，如 “Cancel”、“Clear”、“Select”、“Update” 等，无需重复翻译！而且开箱即用。

TIP

完整的 Quasar 语言包列表见 Quasar Languages on GitHub。

如果您在列表中没有找到想要的语言，欢迎提交 PR 来添加。只需 5 到 10 分钟，我们热忱欢迎任何语言！

配置默认语言包

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

硬编码

如果默认的 Quasar 语言包不需要动态决定（例如不依赖于 cookie），那么可以这样配置：

// quasar.config file

framework: {
  lang: 'de'
}
TIP

对于 Quasar UMD，请查看 UMD / Standalone 页面了解可能还需要在 HTML 文件中引入的标签。

动态配置（非 SSR/SSG）

Quasar CLI：如果需要动态选择 Quasar 语言包（例如依赖于 cookie），那么需要创建一个 boot 文件：quasar new boot quasar-lang-pack [--format ts]。这会创建 /src/boot/quasar-lang-pack.js 文件。编辑内容如下：

import { defineBoot } from '#q-app'
import { Lang } from 'quasar'

// 相对于您的 node_modules/quasar/ 的路径
// 请修改为您自己的路径
const langList = import.meta.glob('../../node_modules/quasar/lang/*.js')
// 或者只选择几个语言（下面的示例只包含 DE 和 FR）：
// import.meta.glob('../../node_modules/quasar/lang/{de,fr}.js')

export default defineBoot(async () => {
  const langIso = 'de' // ... 通过某种逻辑来决定（使用 Cookies Plugin？）

  try {
    langList[ `../../node_modules/quasar/lang/${ langIso }.js` ]().then(lang => {
      Lang.set(lang.default)
    })
  }
  catch (err) {
    console.error(err)
    // 请求的 Quasar 语言包不存在，
    // 捕获错误以避免应用崩溃
  }
})

然后将这个 boot 文件注册到 /quasar.config 文件中：

boot: ["quasar-lang-pack"];

将区域设置匹配到语言包
v2.29+

语言包以 BCP 47 语言标签命名。只有当 Quasar 为某种语言提供了不止一份翻译时，语言包才会带有地区子标签（de、de-CH、de-DE；pt、pt-BR；zh-CN、zh-TW）。其他每种语言都只有一个不区分地区的语言包（es、fr、it……），服务于该语言的所有地区。

因此像 es-MX 或 fr-CA 这样的区域设置并没有自己专属的语言包。与其自行维护一份「应用区域设置 → 语言包名」的映射表，不如把区域设置和你所提供的语言包一起交给 Lang.getClosestIsoName()。它会返回最接近的条目（es-MX 得到 es，sr-Cyrl-RS 得到 sr-Cyrl，zh-Hant 得到 zh-TW，单独的 pt 得到 pt-BR），当没有任何语言包与之同语言时则返回 undefined：

import { defineBoot } from '#q-app'
import { Lang } from 'quasar'

const langList = import.meta.glob('../../node_modules/quasar/lang/*.js')
const langFile = Object.fromEntries(
  Object.keys(langList).map(path => [path.match(/([^/]+)\.js$/)[1], path])
)

export default defineBoot(async () => {
  const langIso = Lang.getClosestIsoName(
    Lang.getLocale(),
    Object.keys(langFile)
  )

  if (langIso !== void 0) {
    const lang = await langList[langFile[langIso]]()
    Lang.set(lang.default)
  }
})

动态配置（SSR/SSG）

在处理 SSR/SSG 时，不能使用单例对象，因为这会污染 sessions。因此，与上面的非 SSR 动态示例不同（请先阅读它），还必须在 boot 文件中指定 ssrContext。请注意，Lang.getLocale() 在服务端会返回 undefined，因此在把区域设置交给 Lang.getClosestIsoName() 之前，需要先从请求中推导它（如其 Accept-Language 请求头或某个 cookie）：

import { defineBoot } from '#q-app'
import { Lang } from 'quasar'

// 相对于您的 node_modules/quasar/ 的路径
// 请修改为您自己的路径
const langList = import.meta.glob('../../node_modules/quasar/lang/*.js')
// 或者只选择几个语言（下面的示例只包含 DE 和 FR）：
// import.meta.glob('../../node_modules/quasar/lang/{de,fr}.js')

// 注意 ssrContext 参数：
export default defineBoot(async ({ ssrContext }) => {
  const langIso = 'de' // ... 通过某种逻辑来决定（使用 Cookies Plugin？）

  try {
    langList[ `../../node_modules/quasar/lang/${ langIso }.js` ]().then(lang => {
      Lang.set(lang.default, ssrContext)
    })
  }
  catch (err) {
    console.error(err)
    // 请求的 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"
  />
  <div>{{ $q.lang.label.close }}</div>
</template>

<script setup>
import { useQuasar } from 'quasar'
import languages from 'quasar/lang/index.json'
import { ref, watch } from 'vue'

const modules = import.meta.glob('../../node_modules/quasar/lang/{de,en-US,es}.js')

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

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

const $q = useQuasar()
const lang = ref($q.lang.isoName)

watch(lang, val => {
  modules[`../../node_modules/quasar/lang/${val}.js`]().then(lang => {
    $q.lang.set(lang.default)
  })
})
</script>

在运行时修改特定标签

如果需要将某个特定标签修改为其他内容，可以这样做：

import { useQuasar } from 'quasar'

setup () {
  const $q = useQuasar()

  function changeLabel () {
    $q.lang.table.noData = 'Hey... there is no data...'
  }

  return { changeLabel }
}

如果需要在 .vue 文件之外执行此操作（且不在 SSR/SSG 模式下），可以：

/src/boot/some-boot-file.js
import { defineBoot } from '#q-app'
import { Lang } from 'quasar'

export default defineBoot(() {
  Lang.props.table.noData = 'Hey... there is no data...'
})

在项目中使用 Quasar 语言包

尽管 Quasar 语言包是专为 Quasar 组件内部使用而设计的，您仍然可以在自己的网站/应用组件中使用其中的标签。

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

在 GitHub 上查看 Quasar 语言包以了解 $q.lang 的结构。

语言包还可以定义一个根级的 formatNumber 函数

v2.31+
，用于将 ASCII 数字字符串渲染为该语言自己的数字形式（fa 和 fa-IR 语言包渲染波斯数字）。QDate、QTime 和 QPagination 会通过它显示数字，你也可以用它来处理自己的数字：

{{ $q.lang.formatNumber?.('2026') ?? '2026' }}

检测地区

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

// 在 Vue 文件之外使用
import { Lang } from 'quasar'
Lang.getLocale() // 返回一个字符串

// 在 Vue 文件中使用
import { useQuasar } from 'quasar'

setup () {
  const $q = useQuasar()
  $q.lang.getLocale() // 返回一个字符串
}

浏览器区域设置很少恰好就是某个语言包的名称（墨西哥的用户上报的是 es-MX，但语言包名为 es）。要挑选出你的应用所提供的最接近的语言包，请参见上文的 将区域设置匹配到语言包。

Ready for more?
选项与辅助工具
SEO
选项与辅助工具
应用国际化
Caught a mistake?Edit this page in browser
MIT LicensePrivacy Policy
Copyright © 2015-present PULSARDEV SRL, Razvan Stoenescu