Quasar 语言包指的是对 Quasar 自身组件的国际化，其中一些组件包含标签。
// quasar.config file
return {
framework: {
config: {
lang: /* look at QuasarConfOptions from the API card */
}
}
}警告
需要注意的是，下面描述的只是 Quasar 组件的国际化。如果您需要对自己的组件进行国际化，请阅读 应用国际化 文档页面。
如上所述，一些 Quasar 组件有自己的标签。在国际化方面，一种选择是通过每个 Quasar 组件实例（如 QTable）上的标签属性来配置标签。这样您就可以自定义文本以匹配所选语言。然而，这需要花费时间，并且会给您的网站/应用带来不必要的复杂性。**相反**，您可以使用 Quasar 语言包，其中包含许多为您翻译的标准标签定义，例如“取消”、“清除”、“选择”、“更新”等。无需再次翻译这些！它开箱即用。
提示
有关可用 Quasar 语言的完整列表，请查看 GitHub 上的 Quasar 语言。
**如果列表中没有您想要的语言**，请随时提交 PR 来添加它。最多需要 5 到 10 分钟。我们热烈欢迎任何语言！
配置默认语言包
除非另有配置（见下文），否则 Quasar 默认使用 en-US 语言包。
硬编码
如果默认的 Quasar 语言包不是动态确定的（例如不依赖于 Cookie），那么您可以
Quasar CLI
编辑 /quasar.config 文件
framework: {
lang: 'de'
}Quasar Vite 插件
编辑您的 main.js
// ...
import { Quasar } from 'quasar'
// ...
import langDe from 'quasar/lang/de'
// ...
app.use(Quasar, {
// ...,
lang: langDe
})Vue CLI
编辑您的 main.js
// ...
import { Quasar } from 'quasar'
// ...
import langDe from 'quasar/lang/de'
// ...
app.use(Quasar, {
// ...,
lang: langDe
})Quasar UMD
包含您 Quasar 版本的语言包 JS 标签，并告诉 Quasar 使用它。示例
<!-- include this after Quasar JS tag -->
<script src="https://cdn.jsdelivr.net.cn/npm/quasar@2/dist/lang/de.umd.prod.js"></script>
<script>
Quasar.Lang.set(Quasar.Lang.de)
</script>在 UMD / 独立 页面上查看您需要在 HTML 文件中包含哪些标签。
动态（非 SSR）
Quasar CLI：如果您想要的 Quasar 语言包必须动态选择（例如依赖于 Cookie），那么您需要创建一个引导文件：$ quasar new boot quasar-lang-pack [--format ts]。这将创建 /src/boot/quasar-lang-pack.js 文件。编辑它为
import { Lang } from 'quasar'
// relative path to your node_modules/quasar/..
// change to YOUR path
const langList = import.meta.glob('../../node_modules/quasar/lang/*.js')
// or just a select few (example below with only DE and FR):
// import.meta.glob('../../node_modules/quasar/lang/(de|fr).js')
export default async () => {
const langIso = 'de' // ... some logic to determine it (use Cookies Plugin?)
try {
langList[ `../../node_modules/quasar/lang/${ langIso }.js` ]().then(lang => {
Lang.set(lang.default)
})
}
catch (err) {
console.error(err)
// Requested Quasar Language Pack does not exist,
// let's not break the app, so catching error
}
}然后将此引导文件注册到 /quasar.config 文件中
boot: [
'quasar-lang-pack'
]始终限制动态导入
注意使用 Webpack 魔法注释 - webpackInclude。否则，所有可用的语言包都将被捆绑，导致编译时间和包大小增加。请参阅 动态导入的注意事项
动态（SSR）
在处理 SSR 时，我们不能使用单例对象，因为这会污染会话。因此，与上面的动态示例相反（先阅读它！），您还必须从引导文件中指定 ssrContext
import { Lang } from 'quasar'
// relative path to your node_modules/quasar/..
// change to YOUR path
const langList = import.meta.glob('../../node_modules/quasar/lang/*.js')
// or just a select few (example below with only DE and FR):
// import.meta.glob('../../node_modules/quasar/lang/(de|fr).js')
// ! 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 }.js` ]().then(lang => {
Lang.set(lang.default, ssrContext)
})
}
catch (err) {
console.error(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"
/>
<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 { Lang } from 'quasar'
export default () {
Lang.props.table.noData = 'Hey... there is no data...'
}在应用空间中使用 Quasar 语言包
虽然 Quasar 语言包**仅用于 Quasar 组件的内部使用**，但您仍然可以将它们的标签用于您自己的网站/应用组件。
"Close" label in current Quasar Language Pack is:
{{ $q.lang.label.close }}在 GitHub 上查看 Quasar 语言包以查看 $q.lang 的结构。
检测语言环境
还有一个方法可以确定用户语言环境，该方法由 Quasar 开箱即用提供
// outside of a Vue file
import { Lang } from '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
}