vue3项目如何国际化实战指南
作者：别拿bug搞偷袭
像很多大型的网址,特别是跨国际等公司网页,访问来自世界各地用户,所以网页的国际化极其重要的需求,下面这篇文章主要给大家介绍了关于vue3项目如何国际化的相关资料,需要的朋友可以参考下
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项目国际化内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！