Quasar 語言包指的是 Quasar 自身元件的國際化，其中一些元件帶有標籤。
// quasar.config file
return {
framework: {
config: {
lang: /* look at QuasarConfOptions from the API card */
}
}
}警告
應注意以下描述僅為 Quasar 元件的國際化。如果您需要國際化自己的元件，請閱讀 App 國際化 文件頁面。
如上所述，某些 Quasar 元件有自己的標籤。在國際化方面，一種選擇是透過 Quasar 元件（例如 QTable）每個實例上的標籤屬性來設定標籤。這是您自訂文字以符合所選語言的方式。然而，這會花費時間並增加網站/應用程式不必要的複雜性。相反地，您可以使用 Quasar 語言包，其中包含許多為您翻譯的標準標籤定義，例如「取消」、「清除」、「選擇」、「更新」等等。無需再次翻譯這些！而且它是開箱即用的。
提示
如需可用 Quasar 語言的完整列表，請查看 GitHub 上的 Quasar Languages。
如果您的目標語言不在該列表中，請隨時提交 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/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 檔案。編輯它以
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 magic comment - 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
}