从零开始学建设网站,网站服务器速度查询,企业官方网站开发外包,百度搜索入口官网✅创作者#xff1a;陈书予 #x1f389;个人主页#xff1a;陈书予的个人主页 #x1f341;陈书予的个人社区#xff0c;欢迎你的加入: 陈书予的社区 #x1f31f;专栏地址: 三十天精通 Vue 3 文章目录 引言一、Vue 3 国际化概述1.1 国际化的概念1.2 国际化的作用1.3 V… ✅创作者陈书予 个人主页陈书予的个人主页 陈书予的个人社区欢迎你的加入: 陈书予的社区 专栏地址: 三十天精通 Vue 3 文章目录 引言一、Vue 3 国际化概述1.1 国际化的概念1.2 国际化的作用1.3 Vue 3 中的国际化 二、Vue 3 中的国际化基础2.1 使用 Vue I18n2.2 在组件中使用 Vue I18n2.2.1 使用翻译函数2.2.2 使用指令2.2.3 使用组件2.2.4 在 JavaScript 中使用翻译函数 2.3 格式化翻译字符串2.3.1 基础格式化2.3.2 数字格式化2.3.3 日期格式化2.3.4 货币格式化在模板中使用 $n 格式化函数在 JavaScript 代码中使用 $n 格式化函数 2.4 处理复数 三、Vue 3 中的高级国际化3.1 使用多种语言3.1.1 为多种语言提供翻译3.1.2 切换语言 3.2 处理日期和时间3.2.1 处理时区3.2.2 处理相对时间3.2.3 处理不同时区的日期和时间 3.3 使用插件3.3.1 使用 vue-i18n-extract 提取翻译3.3.2 使用 vue-i18n-locale-message 提供翻译 3.4 处理复杂文本3.4.1 处理富文本3.4.2 处理复杂的表格和列表 四、Vue 3 中的国际化最佳实践4.1 定义一致的翻译规范4.2 使用翻译提取工具4.3 格式化翻译字符串4.4 将翻译与代码分离 五、Vue 3 中的国际化常见问题及解决方案5.1 如何处理不同语言的拼写和语法规则5.2 如何处理复杂的日期和时间5.3 如何处理复杂的文本布局 引言
随着互联网的发展越来越多的网站和应用需要面向不同的国家和地区提供服务。这就需要对应的国际化支持即在同一个应用程序中支持多个语言和文化习惯。Vue 3 作为一款流行的前端框架提供了完善的国际化支持方便开发者为不同语言的用户提供更好的用户体验。
今天将介绍 Vue 3 中的国际化基础和高级功能包括使用 Vue I18n、处理复数、处理日期和时间、使用插件、最佳实践以及常见问题及解决方案。
一、Vue 3 国际化概述 1.1 国际化的概念
国际化Internationalization缩写为 i18n是指为不同语言和文化习惯的用户提供相同的软件服务和用户界面包括语言、货币、时间、数字格式等方面的适应性。通过国际化用户可以在他们熟悉的语言和文化环境中使用应用程序。
1.2 国际化的作用
随着互联网的发展越来越多的应用需要面向全球用户提供服务因此国际化变得越来越重要。通过国际化可以为用户提供更好的用户体验增加应用程序的可用性和可访问性提高应用程序的市场占有率。
1.3 Vue 3 中的国际化
Vue 3 是一款流行的前端框架提供了完善的国际化支持。Vue I18n 是一个专门为 Vue.js 应用程序提供国际化支持的插件可以轻松地为不同语言的用户提供服务。Vue I18n 支持多种语言、复数处理、日期和时间处理、翻译提取等高级功能方便开发者为全球用户提供更好的用户体验。
二、Vue 3 中的国际化基础 2.1 使用 Vue I18n
Vue I18n 是 Vue.js 的国际化插件它提供了在 Vue.js 应用中管理多语言的能力。使用 Vue I18n我们可以在应用程序中轻松地提供不同语言的文本翻译。
使用 Vue I18n 需要进行以下步骤
安装 Vue I18n
npm install vue-i18n创建一个 VueI18n 实例
import { createApp } from vue
import { createI18n } from vue-i18nconst messages {en: {hello: Hello!,welcome: Welcome to my app.},fr: {hello: Bonjour!,welcome: Bienvenue sur mon application.}
}const i18n createI18n({locale: en,messages
})const app createApp({// ...
})
app.use(i18n)
app.mount(#app)在上面的代码中我们首先创建了一个 messages 对象它包含了我们希望在应用程序中提供的文本翻译。我们定义了两种语言英语和法语每种语言都包含一个 hello 和一个 welcome 的文本字符串。
接下来我们创建了一个 VueI18n 实例它接收一个 locale 和一个 messages 对象。我们将默认的语言设置为英语。
最后我们将 i18n 实例作为插件添加到我们的应用程序中这样就可以在所有组件中使用它。
2.2 在组件中使用 Vue I18n
2.2.1 使用翻译函数
Vue I18n 提供了 t ( ) 函数来翻译文本字符串。 t() 函数来翻译文本字符串。 t()函数来翻译文本字符串。t() 函数接收一个键值作为参数它对应于我们定义的 messages 对象中的键值。例如
templatediv{{ $t(hello) }}/div
/template在上面的代码中我们使用 $t() 函数来翻译 ‘hello’ 键对应的文本字符串。如果我们的应用程序当前的语言设置为英语那么这个组件将显示 “Hello!”。
2.2.2 使用指令
Vue I18n 还提供了一个 v-t 指令来翻译文本字符串。它与 $t() 函数的使用方式类似
templatediv v-thello/div
/template2.2.3 使用组件
Vue I18n 还提供了一些内置组件可以方便地在组件中使用。例如我们可以使用 i18n-t 组件来翻译文本字符串
templatei18n-t keyhello/i18n-t
/template2.2.4 在 JavaScript 中使用翻译函数
我们也可以在JavaScript 中使用翻译函数来进行国际化。首先需要在组件的 setup 函数中引入 useI18n 函数并通过该函数获取到 $t 翻译函数。
import { useI18n } from vue-i18nexport default {setup() {const { t } useI18n()// 在其他函数中使用 $t 函数function someFunction() {const translatedString t(message.hello)console.log(translatedString)}return {someFunction,}}
}这样我们就可以在任何需要进行翻译的 JavaScript 函数中使用 $t 函数。
2.3 格式化翻译字符串
2.3.1 基础格式化
Vue I18n 提供了一个 $t 函数用于在 Vue 组件和 JavaScript 代码中格式化翻译字符串。我们可以在翻译字符串中使用大括号来包裹要格式化的内容。例如
templatediv{{ $t(message.hello, { name: John }) }}/div
/templatescript
export default {methods: {greet() {console.log(this.$t(message.hello, { name: John }))}}
}
/script在上面的例子中我们在翻译字符串中使用了大括号来包裹要格式化的内容使用了一个对象来传递要格式化的值。在组件中使用 $t 函数时我们可以在组件的 template 中使用插值语法来直接格式化翻译字符串。在 JavaScript 代码中使用 $t 函数时我们可以直接将格式化后的字符串输出到控制台。
2.3.2 数字格式化
Vue I18n 提供了一个 NumberFormat 类用于格式化数字。NumberFormat 类可以接收一个格式化选项对象作为参数该对象包含了一些用于格式化数字的属性。例如
templatediv{{ $n(42.42, { style: currency, currency: USD }) }}/div
/templatescript
export default {mounted() {console.log(this.$n(1234567890, { style: decimal }))}
}
/script在上面的例子中我们使用 $n 函数来格式化数字。我们可以传递一个数字和一个格式化选项对象作为参数。在组件中使用 $n 函数时我们可以在组件的 template 中使用插值语法来格式化数字。在 JavaScript 代码中使用 $n 函数时我们可以直接将格式化后的数字输出到控制台。
2.3.3 日期格式化
在 Vue 3 中使用 $d 标识符来指定日期对象在翻译字符串中使用 {} 将其包裹起来。例如
templatep{{ $d(new Date(), long) }} 现在是几点/p
/templatescript
import { defineComponent } from vue
import { useI18n } from vue-i18nexport default defineComponent({setup() {const { t } useI18n()return {$d: t($d),}},
})
/script其中long 表示长日期格式short 表示短日期格式。
另外还可以通过配置 dateTimeFormats 选项来定义日期时间格式然后在翻译字符串中使用 {} 包裹 $d 标识符和时间格式的键名例如
const i18n createI18n({locale: zh-CN,messages: {zh-CN: {dateTimeFormats: {zh-CN: {short: {year: numeric,month: short,day: numeric,},},},},},
})
templatep{{ $d(new Date(), {short}) }} 现在是几点/p
/templatescript
import { defineComponent } from vue
import { useI18n } from vue-i18nexport default defineComponent({setup() {const { t } useI18n()return {$d: t($d),}},
})
/script2.3.4 货币格式化
在国际化应用中货币的格式化也是一个很重要的问题。Vue I18n 提供了一个 $n 格式化函数可以将数字格式化成货币的形式。这个函数的使用方式和 $t 翻译函数类似我们只需要在模板或 JavaScript 代码中引用即可。
在模板中使用 $n 格式化函数
在模板中使用 $n 格式化函数需要使用 v-bind 指令将表达式的值绑定到需要格式化的元素的属性上例如下面的示例
templatediv{{ $n(price, { style: currency, currency: USD }) }}/div
/templatescript
export default {data() {return {price: 1000,};},
};
/script在这个示例中我们将 price 的值格式化为美元货币的形式并使用插值表达式将格式化后的字符串输出到页面上。这个函数的第一个参数是需要格式化的值第二个参数是一个对象用来设置格式化的选项。在这个示例中我们设置了 style 为 currencycurrency 为 USD这样就可以将数字格式化成美元货币的形式了。
在 JavaScript 代码中使用 $n 格式化函数
在 JavaScript 代码中使用 $n 格式化函数和使用 $t 翻译函数类似我们只需要在组件实例或其他 JavaScript 代码中引用 $n 函数并传入需要格式化的值和格式化选项即可。例如下面的示例
templatediv{{ formatPrice }}/div
/templatescript
export default {data() {return {price: 1000,};},computed: {formatPrice() {return this.$n(this.price, { style: currency, currency: USD });},},
};
/script在这个示例中我们将 $n 格式化函数作为计算属性的返回值这样就可以在模板中使用 formatPrice 计算属性的值了。在这个计算属性中我们将 this.price 的值格式化为美元货币的形式并返回格式化后的字符串。
2.4 处理复数
在某些语言中复数形式的翻译需要根据数字的不同而变化例如英语中的单数和复数形式汉语中的量词等。Vue I18n 提供了内置的复数处理规则可以在翻译字符串中使用。
在 Vue I18n 中复数规则由选项 pluralizationRules 定义。该选项接收一个函数该函数将接收三个参数choice、locale 和 values。
其中choice 是一个整数表示当前数字的大小。locale 表示当前的语言环境而 values 包含了传递给翻译函数的值。函数需要返回一个表示复数形式的字符串。
下面是一个使用复数处理规则的示例
const i18n createI18n({locale: en,messages: {en: {messages: {apple: There is one apple |||| There are {count} apples}}},pluralizationRules: {// 英语的复数规则en: function (choice, locale) {if (choice 0) {return zero;} else if (choice 1) {return one;} else {return other;}}}
})console.log(i18n.t(messages.apple, { count: 0 })) // There is one apple
console.log(i18n.t(messages.apple, { count: 1 })) // There is one apple
console.log(i18n.t(messages.apple, { count: 2 })) // There are 2 apples在上面的示例中我们定义了一个复数规则函数将英语中的复数规则定义为如果数字是 0则使用“zero”形式如果是 1则使用“one”形式否则使用“other”形式。
然后在翻译字符串中我们使用双竖线||将单数和复数形式分隔开然后使用大括号指定一个变量来传递当前的数字。
最后我们在组件中使用 $t 方法来调用翻译字符串并将数字传递给翻译函数。
需要注意的是在使用复数规则时我们需要将复数形式的字符串放在单数形式的字符串之前然后使用双竖线||将它们分隔开。这是因为在某些语言中单数形式和复数形式的字符串的顺序是相反的。
三、Vue 3 中的高级国际化 3.1 使用多种语言
3.1.1 为多种语言提供翻译
在 Vue I18n 中提供多种语言的翻译非常简单。我们只需要在 messages 对象中提供每种语言对应的翻译即可。
举个例子假设我们要提供英文和法文的翻译我们可以这样做
import { createApp } from vue
import { createI18n } from vue-i18nconst messages {en: {hello: Hello!},fr: {hello: Bonjour!}
}const i18n createI18n({locale: en,messages
})const app createApp({// ...
})app.use(i18n)在上面的代码中我们提供了 en 和 fr 两种语言的翻译。当我们的应用程序初始化时我们将默认语言设置为英文 (en)。如果我们想要切换到法文我们只需要将 locale 设置为 fr如下所示
i18n.locale fr然后我们的应用程序就会显示法文的翻译。
3.1.2 切换语言
在 Vue I18n 中我们可以通过修改 locale 属性来切换语言。例如如果我们要将语言切换为法文我们可以这样做
i18n.locale fr当我们这样做时Vue I18n 会根据 messages 对象中提供的翻译自动切换语言。
但是这只会影响到我们在 Vue 模板中使用的翻译。如果我们需要在 JavaScript 代码中使用翻译我们需要通过 t 函数来获取当前语言下的翻译。
const greeting i18n.t(hello)
console.log(greeting) // 输出当前语言下的翻译3.2 处理日期和时间
3.2.1 处理时区
处理时区是一个非常重要的问题特别是在跨时区的应用程序中。在 Vue I18n 中我们可以使用 $d 函数来处理时区问题。
例如我们可以使用以下代码来格式化带有时区信息的日期
this.$i18n.d(new Date(), short, { timeZone: America/Los_Angeles })在这个例子中我们使用 $i18n.d 函数来格式化日期并使用 timeZone 选项来指定时区。
3.2.2 处理相对时间
另一个常见的日期和时间问题是处理相对时间例如“1 小时前”、“2 天前”等。在 Vue I18n 中我们可以使用 $d 函数的 relative 选项来处理相对时间。
例如我们可以使用以下代码来格式化相对时间
this.$i18n.d(new Date(2022, 3, 20), { relative: true })在这个例子中我们使用 $i18n.d 函数来格式化日期并使用 relative 选项来生成相对时间。
3.2.3 处理不同时区的日期和时间
在跨时区的应用程序中处理不同时区的日期和时间可能是必需的。在 Vue I18n 中我们可以使用 $d 函数的 timeZone 和 timeZoneName 选项来处理不同时区的日期和时间。
例如我们可以使用以下代码来格式化带有不同时区的日期
this.$i18n.d(new Date(), { timeZone: America/Los_Angeles, timeZoneName: short })在这个例子中我们使用 $i18n.d 函数来格式化日期并使用 timeZone 和 timeZoneName 选项来指定不同的时区和时区名称。
3.3 使用插件
3.3.1 使用 vue-i18n-extract 提取翻译
vue-i18n-extract 是一个用于从 Vue.js 应用程序中提取翻译字符串的命令行工具。它可以帮助我们自动提取代码中所有的翻译字符串并将它们保存到一个翻译文件中方便我们进行国际化翻译。
使用 vue-i18n-extract 非常简单只需要按照以下步骤操作
安装 vue-i18n-extract
npm install -g vue-i18n-extract运行 vue-i18n-extract 命令指定要提取翻译的文件或文件夹
vue-i18n-extract path/to/your/component.vue -o path/to/output/translation.jsonvue-i18n-extract 会自动在指定的输出路径下生成一个翻译文件你可以打开它并编辑其中的翻译字符串。
3.3.2 使用 vue-i18n-locale-message 提供翻译
vue-i18n-locale-message 是一个用于管理和提供翻译字符串的库它可以帮助我们将翻译字符串保存到一个单独的文件中并通过插件的形式将其注入到 Vue 实例中。使用 vue-i18n-locale-message 可以方便地管理和维护翻译文件同时也可以提供更高效的翻译字符串访问方式。
使用 vue-i18n-locale-message 的步骤如下
安装 vue-i18n-locale-message
npm install vue-i18n-locale-message --save在 main.js 中创建一个 VueI18n 实例并通过插件的形式注入到 Vue 实例中
import Vue from vue
import VueI18n from vue-i18n
import localeMessage from ./locale-message.jsonVue.use(VueI18n)const i18n new VueI18n({locale: en,messages: localeMessage
})new Vue({i18n
}).$mount(#app)创建一个翻译文件 locale-message.json保存所有的翻译字符串格式如下
{en: {message: {hello: Hello World}},zh-CN: {message: {hello: 你好世界}}
}在组件中使用 $t 方法访问翻译字符串
templatediv{{ $t(message.hello) }}/div
/template3.4 处理复杂文本
3.4.1 处理富文本
处理富文本涉及到在翻译过程中保留 HTML 标签和样式同时仍然保持翻译的正确性。这可以通过使用类似于 Vue 的插值的方式来实现。
Vue I18n 提供了 v-html 指令来实现在翻译中保留 HTML 标签和样式。例如
p v-html$t(some-key)/p其中 some-key 是需要翻译的字符串的键它包含 HTML 标签和样式。当使用 v-html 指令时Vue I18n 会自动保留标签和样式。
3.4.2 处理复杂的表格和列表
处理复杂的表格和列表也涉及到在翻译过程中保留 HTML 标签和样式同时仍然保持翻译的正确性。这可以通过使用类似于 Vue 的插值的方式来实现。
例如假设我们有一个包含表格的翻译字符串
{table: tabletrthName/ththAge/th/trtrtdJohn/tdtd30/td/trtrtdJane/tdtd25/td/tr/table
}我们可以在组件中使用 v-html 指令来保留 HTML 标签和样式
templatediv v-html$t(table)/div
/template当翻译字符串包含复杂的表格或列表时需要谨慎处理以确保翻译的正确性和可读性。
四、Vue 3 中的国际化最佳实践 4.1 定义一致的翻译规范
在使用国际化时定义一致的翻译规范是非常重要的。这样做可以确保整个项目中的翻译风格、命名方式、格式等保持一致使得代码更易于维护。
一些常见的翻译规范包括
命名方式在命名翻译项时使用一致的命名规则例如使用驼峰命名法或下划线命名法。翻译格式使用一致的翻译格式例如使用 {name}已发送{count}封电子邮件 的格式。标点符号在翻译时使用一致的标点符号例如在英文中使用半角标点中文中使用全角标点。
4.2 使用翻译提取工具
使用翻译提取工具可以自动化提取代码中的翻译项并将其放入独立的翻译文件中。这样做可以帮助开发人员更快速、更准确地管理翻译项同时也可以方便翻译人员进行翻译。
一些常用的翻译提取工具包括
vue-i18n-extract一个基于vue-i18n的插件可以提取代码中的翻译项并将其转换为独立的翻译文件。i18n-ally一个可视化的翻译工具可以与多种框架和编辑器集成支持自动提取翻译项并提供翻译界面。
4.3 格式化翻译字符串
在国际化过程中往往需要对翻译字符串进行格式化。例如当我们需要将一些变量插入到翻译字符串中时可以使用格式化字符串的方式。
使用内置的 intl 标准库可以帮助我们更方便地格式化翻译字符串。同时也可以使用第三方的格式化库例如 dayjs、numeral 等。
4.4 将翻译与代码分离
将翻译与代码分离可以使得代码更易于维护和升级。通过将翻译内容放入独立的文件中可以帮助开发人员更清晰地查看代码而不必在代码中混杂翻译内容。 通常情况下我们会将翻译内容存放在单独的 json 文件中然后在代码中引入翻译文件并通过 vue-i18n 来获取这些翻译内容。这种方法的好处是可以轻松地添加或更新翻译内容而不必修改代码。另外将翻译内容与代码分离还可以让不同的人员分别负责不同的工作例如开发人员负责编写代码翻译人员负责编写翻译内容从而提高开发效率和协作效果。
以下是一个简单的示例展示如何将翻译内容存放在单独的 json 文件中
// translation.json
{greeting: Hello, {name}!,farewell: Goodbye, {name}!
}然后在 Vue 组件中可以通过 vue-i18n 来获取翻译内容
import { createApp } from vue;
import { createI18n } from vue-i18n;
import translations from ./translation.json;
import App from ./App.vue;const i18n createI18n({locale: en,messages: translations,
});createApp(App).use(i18n).mount(#app);在这个示例中我们将翻译内容存放在 translation.json 文件中并在 Vue 应用程序中引入该文件。然后我们通过 createI18n 函数创建一个 vue-i18n 实例并将翻译内容传递给 messages 选项。最后我们将 vue-i18n 实例挂载到 Vue 应用程序中以便在组件中使用。
通过这种方式我们可以将翻译内容与代码分离使得代码更加清晰和易于维护。同时我们还可以轻松地添加或更新翻译内容而不必修改代码。
五、Vue 3 中的国际化常见问题及解决方案 5.1 如何处理不同语言的拼写和语法规则
不同的语言有不同的语法规则和拼写方式所以在进行国际化时需要考虑这些差异。一种常见的解决方案是使用 ICU 消息格式它提供了一些特殊的占位符可以根据不同的语言规则来格式化文本。
另外可以使用一些现成的国际化库例如 formatjs 和 Globalize 等这些库可以处理不同语言的语法规则和拼写方式。
5.2 如何处理复杂的日期和时间
在国际化中处理日期和时间时需要考虑不同语言和地区的日期格式和时间格式的差异。Vue 3 中提供了一些内置的日期和时间格式化选项例如 d 、 d、 d、D、 t 、 t、 t、T 等同时还可以使用 JavaScript 的内置 Date 对象和 Moment.js 库来处理日期和时间格式化。
对于处理不同时区的日期和时间可以使用 Moment.js 库提供的时区功能来进行处理。
5.3 如何处理复杂的文本布局
在处理复杂的文本布局时需要考虑到不同语言和地区之间的文本长度和方向的差异。一种解决方案是使用 CSS 中的 text-overflow 和 white-space 属性通过截断或换行来适应不同语言的文本长度。同时还可以使用 CSS 中的 direction 属性来设置文本的方向。
另外一些现成的国际化库也提供了一些文本布局的功能例如 formatjs 库提供的 Intl.ListFormat 类可以根据不同的语言来格式化列表例如将中文的列表用“、”分隔而将英文的列表用“”分隔。
