Quasar 语言包是针对 Quasar 自身组件的国际化方案，因为其中一些组件包含文案标签。
// quasar.config file
return {
framework: {
config: {
lang: /* look at QuasarConfOptions from the API card */
}
}
}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）
Quasar CLI：如果需要动态选择 Quasar 语言包（例如依赖于 cookie），那么需要创建一个 boot 文件：$ quasar new boot quasar-lang-pack [--format ts]。这会创建 /src/boot/quasar-lang-pack.js 文件。编辑内容如下：
import { defineBoot } from '#q-app/wrappers'
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"];务必约束动态导入
注意示例代码中使用了 Webpack magic comment - webpackInclude。否则所有可用的语言包都会被打包，导致编译时间和包体积增加。详见 Caveat for dynamic imports
动态配置（SSR）
在处理 SSR 时，不能使用单例对象，因为这会污染 sessions。因此，与上面的非 SSR 动态示例不同（请先阅读它），还必须在 boot 文件中指定 ssrContext：
import { defineBoot } from '#q-app/wrappers'
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>
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
}))
export default {
setup () {
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)
})
})
return {
lang,
langOptions
}
}
}
</script>在运行时修改特定标签
如果需要将某个特定标签修改为其他内容，可以这样做：
import { useQuasar } from 'quasar'
setup () {
const $q = useQuasar()
function changeLabel () {
$q.lang.table.noData = 'Hey... there is no data...'
}
return { changeLabel }
}如果需要在 .vue 文件之外执行此操作（且不在 SSR 模式下），可以：
import { defineBoot } from '#q-app/wrappers'
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 的结构。
检测地区
Quasar 还提供了一个开箱即用的方法来检测用户所在地区：
// 在 Vue 文件之外使用
import { Lang } from 'quasar'
Lang.getLocale() // 返回一个字符串
// 在 Vue 文件中使用
import { useQuasar } from 'quasar'
setup () {
const $q = useQuasar()
$q.lang.getLocale() // 返回一个字符串
}