vue3项目如何国际化实战指南

 更新时间:2022年09月22日 15:53:32   作者:别拿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项目国际化内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue+VeeValidate 校验范围实例详解(部分校验,全部校验)

    vue+VeeValidate 校验范围实例详解(部分校验,全部校验)

    validate()可以指定校验范围内,或者是全局的 字段。而validateAll()只能校验全局。这篇文章主要介绍了vue+VeeValidate 校验范围(部分校验,全部校验) ,需要的朋友可以参考下
    2018-10-10
  • vue-iview动态新增和删除的方法

    vue-iview动态新增和删除的方法

    这篇文章主要为大家详细介绍了vue-iview动态新增和删除的方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-06-06
  • 详解vuejs几种不同组件(页面)间传值的方式

    详解vuejs几种不同组件(页面)间传值的方式

    本篇文章主要介绍了详解vuejs几种不同组件(页面)间传值的方式,具有一定的参考价值,有兴趣的可以了解一下
    2017-06-06
  • vue中的proxyTable反向代理(亲测有用)

    vue中的proxyTable反向代理(亲测有用)

    这篇文章主要介绍了vue中的proxyTable反向代理(亲测有用),具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • vue-amap安装和用法步骤

    vue-amap安装和用法步骤

    vue-amap是饿了么开源的一套基于 Vue 2.0 和高德地图的地图组件。接下来通过本文给大家介绍vue-amap安装和使用,需要的朋友可以参考下
    2021-12-12
  • 用Vue.js方法创建模板并使用多个模板合成

    用Vue.js方法创建模板并使用多个模板合成

    在本篇文章中小编给大家分享了关于如何使用Vue.js方法创建模板并使用多个模板合成的相关知识点内容,需要的朋友们学习下。
    2019-06-06
  • 详解Element-UI中上传的文件前端处理

    详解Element-UI中上传的文件前端处理

    这篇文章主要介绍了详解Element-UI中上传的文件前端处理,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-08-08
  • Vue如何清空对象

    Vue如何清空对象

    这篇文章主要介绍了Vue如何清空对象,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-03-03
  • Vue中qs插件的使用详解

    Vue中qs插件的使用详解

    这篇文章主要介绍了Vue中qs插件的使用详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-02-02
  • 解决vue.js提交数组时出现数组下标的问题

    解决vue.js提交数组时出现数组下标的问题

    今天小编就为大家分享一篇解决vue.js提交数组时出现数组下标的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11

最新评论