如何实现Vue3项目国际化实战？

本文共计548个文字，预计阅读时间需要3分钟。

Vue3项目如何国际化+我们已属于特性Vue2+，使用i18n+进行国际化+那Vue3+我们如何配置+i18n+呢？+配置+安装npm i vue-i18n+创建il18n+在src目录下，创建i18n文件夹，并在下面分别创建“

vue3项目如何国际化

• 我们已经属性vue2 ，使用i18n ，进行国际化
• 那vue3 我们如何配置 i18n 呢 ？

配置

Ⅰ、安装

npm i vue-i18n

Ⅱ、创建 il18n

• 在src目录下，创建 i18n 文件夹，并在下面分别创建三个文件 分别为 ：
• ①index.js=> 主文件用于导入 i18n ，和相关配置
• ②zh.js=> 存放中文内容
• ③en.js=> 存放英文内容

① main.js 示例 =>

import { createI18n } from 'vue-i18n'; import ZH from './zh.js'; import EN from './en.js'; const messages = { zh: { ...ZH }, en: { ...EN }, }; const i18n = createI18n({ legacy: false, globalInjection: true, locale: 'zh', messages }); export default i18n;

locale属性用于设置初始语言， 值要和 messages 中的属性 key ，相互对应

② zh.js 示例 =>

export default { person: { name:'张三', hobby:'唱跳，rap，篮球' }, };

③ en.js 示例 =>

export default { person: { name:'zhangsan', hobby:'Singing and dancing, rap, basketball' }, };

Ⅲ、在main.js 中配置 i18n

import { createApp } from "vue"; import App from "./App.vue"; import i18n from './i18n/index'; const app = createApp(App); app .use(i18n) .mount("#app");

使用

Ⅰ、在 html 中使用 如果只是在 html 中使用，不用在导入任何东西

<template> <div> <span> {{ $t("person.name") }} </span> <span> {{ $t("person.hobby") }} </span> </div> </template>

Ⅱ、在js 中使用 需要通过 导入 getCurrentInstance 进行获取

<script setup> import { getCurrentInstance } from "vue"; const { $t } = getCurrentInstance().proxy; console.log( $t("person.name") ); // => 获取值 </script>

Ⅱ、修改语言 （和获取当前语言）

• 切换语言要导入vue-i18n的 locale 属性，locale是ref对象，要修改value
• 不要修改i18n/index.js文件, 导出的对象属性

<script setup> import { useI18n } from 'vue-i18n' const { locale } = useI18n() // 切换中文 function changeZh(){ locale.value = 'zh'; }; // 切换英文 function changeEn(){ locale.value = 'en'; }; </script>

总结

到此这篇关于vue3项目如何国际化的文章就介绍到这了,更多相关vue3项目国际化内容请搜索易盾网络以前的文章或继续浏览下面的相关文章希望大家以后多多支持易盾网络！