国际化是一个设计流程，它确保产品（网站或应用程序）可以适应各种语言和地区，而无需对源代码进行工程更改。可以将国际化理解为本地化的准备。
提示
处理网站/应用程序的推荐包是 vue-i18n。此包应通过 @quasar/app-vite 启动文件 或 @quasar/app-webpack 启动文件 添加。在启动文件文档页面上，您可以看到一个将 vue-i18n 插件化的具体示例。
警告
Quasar 文档假设您已经熟悉 vue-i18n。下面仅描述了如何在 Quasar CLI 项目中使用它的基本知识。有关其所有功能的完整列表，请访问 Vue I18n 文档。
手动设置
如果您在 yarn create quasar（或 npm init quasar 或 pnpm 或 Bun 等效项）向导期间错过了启用 i18n，以下是如何手动设置它。
- 将
vue-i18n依赖项安装到您的应用程序中。
$ yarn add vue-i18n@next- 创建一个文件
src/boot/i18n.js，内容如下
import { createI18n } from 'vue-i18n'
import messages from 'src/i18n'
export default ({ app }) => {
// Create I18n instance
const i18n = createI18n({
locale: 'en-US',
legacy: false, // comment this out if not using Composition API
messages
})
// Tell app to use the I18n instance
app.use(i18n)
}在您的应用程序中创建一个文件夹 (/src/i18n/)，它将保存您将支持的每种语言的定义。例如：src/i18n。请注意步骤 2 中的“import messages from ‘src/i18n’” 。这是您编写导入内容的步骤。
现在在
quasar.config文件的boot部分引用此文件
return {
boot: [
// ...
'i18n'
],
// ...
}现在您可以准备在您的页面中使用它了。
在您的 SFC 中设置翻译块
如果我们想要在 Quasar CLI 项目中的 SFC（单文件组件）中添加对 <i18n> 标签的支持，那么我们需要修改现有的配置。
我们首先安装 @intlify/vue-i18n-loader 包
$ yarn add --dev @intlify/vue-i18n-loader然后我们编辑项目根目录下的 quasar.config 文件。我们必须包含以下内容
const path = require('node:path')
build: {
chainWebpack: chain => {
chain.module
.rule('i18n-resource')
.test(/\.(json5?|ya?ml)$/)
.include.add(path.resolve(__dirname, './src/i18n'))
.end()
.type('javascript/auto')
.use('i18n-resource')
.loader('@intlify/vue-i18n-loader')
chain.module
.rule('i18n')
.resourceQuery(/blockType=i18n/)
.type('javascript/auto')
.use('i18n')
.loader('@intlify/vue-i18n-loader')
}
}如何使用
这是一个显示主要用例的示例
<template>
<q-page>
<!-- text interpolation, reactive -->
{{ $t('hello') }}
<!-- prop/attr binding, reactive -->
<q-btn :label="$t('hello')" />
<!-- v-html directive usage -->
<span v-html="content"></span>
</q-page>
</template>
<script setup>
// Composition API variant
import { computed } from 'vue'
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
// bound to a static variable, non-reactive
// const staticContent = t('hello')
// bound to a reactive variable, but one-time assignment, locale changes will not update the value
// const reactiveStaticContent = ref(t('hello'))
// bound to a reactive variable, locale changes will reflect the value
const content = computed(() => t('hello'))
function notify() {
Notify.create({
type: 'positive',
message: t('hello')
})
}
</script><script>
// Options API variant
export default {
data() {
return {
// bound to a reactive variable, but one-time assignment, locale changes will not update the value
content: this.$t('hello')
}
}
}
</script>添加新语言
假设您想添加新的德语。
- 创建新文件
src/i18n/de/index.js并将文件src/i18n/en-US/index.js的内容复制到其中，然后更改语言字符串。 - 现在更改
src/i18n/index.js并添加新的de语言。
import enUS from './en-US'
import de from './de'
export default {
'en-US': enUS,
'de': de
}创建语言切换器
<template>
<!-- ...... -->
<q-select
v-model="locale"
:options="localeOptions"
label="Quasar Language"
dense
borderless
emit-value
map-options
options-dense
style="min-width: 150px"
/>
<!-- ...... -->
</template>
<script>
import { useI18n } from 'vue-i18n'
export default {
setup () {
const { locale } = useI18n({ useScope: 'global' })
return {
locale,
localeOptions: [
{ value: 'en-US', label: 'English' },
{ value: 'de', label: 'German' }
]
}
}
}
</script>大写
许多语言，例如希腊语、德语和荷兰语，都有非直观的规则来显示大写字母，并且有一个您应该注意的极端情况
QBtn 组件将使用 CSS text-transform: uppercase 规则自动将其标签转换为全大写。根据 MDN 网页文档，“语言由 lang HTML 属性或 xml:lang XML 属性定义。” 不幸的是，这在浏览器中的实现参差不齐，2017 年德语连字符 ß 的 ISO 标准还没有真正进入规范。目前您有两个选择
- 在您的标签中使用属性
no-caps并按应有的方式编写字符串 - 在你的标签中使用属性
no-caps，并使用 toLocaleUpperCase 重新编写字符串，使用$q.lang.getLocale()检测到的区域设置。
检测区域设置
还有一种方法可以确定用户区域设置，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
}警告
如果你使用 Quasar 的 set 方法（$q.lang.set()），这将不会反映在上面 Quasar 的 getLocale 中。这是因为 getLocale() 将始终返回用户的区域设置（基于浏览器设置）。set() 方法指的是 Quasar 的内部区域设置，用于确定使用哪个语言文件。如果你想查看使用 set() 设置了哪种语言，可以使用 $q.lang.isoName。