vue3中使用vue-i18n

这篇具有很好参考价值的文章主要介绍了vue3中使用vue-i18n。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1.先在项目中下载vue-i18n

npm install vue-i18n@9.6.2

2.1 .为了结构清晰,在src目录下创建一个lang文件夹

2.2 . 在lang文件夹分别下创建两个文件:en.js    /    zh.js代表两种语言

en.js:

export default {
  message: {
      hello: 'hello,world',
      btn:'modify'
  }
}

zh.js:

export default {
  message: {
      hello: '你好,世界',
      btn:'修改'
  }
}

2.3 . 接着在lang文件夹下创建一个index.js文件:

import { createI18n } from 'vue-i18n';
import en from "./en.js"
import zh from "./zh.js"

const messages = {//所有语言
    zh: zh,
    en: en,
}

const i18n = createI18n({
    locale: 'zh', //默认当前语言
    fallbackLocale: 'en', //替补语言,比如上边locale语言显示不了了就显示这个语言
    messages, //所有语言
    legacy:false, //用于区分是否使用组合式api,v3使用要设为false
})

export default i18n;

现在目录结构是这样:

vue3中使用vue-i18n,vue.js,前端,javascript

3. 在main.js中引入并use刚才创建的index.js文件:

import { createApp } from 'vue'

import App from './App.vue'
import i18n from './lang/index.js'

createApp(App).use(i18n).mount('#app')

4. 到此基本配置已经完成了,接下来使用:

在项目中任意一个.vue文件中:

<template>
  <p>{{ t("message.hello") }}</p>
</template>

<script setup>//setup语法糖加上
import { useI18n } from 'vue-i18n';//从i18n中引入
const { t } = useI18n();//结构出t,各国的语言就在这个t里,使用方法就是<template>模板中那样直接使用

</script>

5.修改语言文章来源地址https://www.toymoban.com/news/detail-737976.html

<template>
  <p>{{ t("message.hello") }}</p>
  <button @click="change">{{ t("message.btn") }}</button>
</template>

<script setup>//setup语法糖加上
import { useI18n } from 'vue-i18n';//从i18n中引入
const { t,locale } = useI18n();//解构出t,各国的语言就在这个t里,使用方法就是<template>模板中那样直接使用
//修改用解构的locale.value修改

const change = ()=>{//按钮点击事件
  if(locale.value == 'en'){
    locale.value = 'zh'
  }else{
    locale.value = 'en'
  }
}
</script>

到了这里,关于vue3中使用vue-i18n的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Vue 国际化之 vue-i18n 的使用

    目录 一、安装 二、使用 1、准备语言包 2、准备翻译的语言环境 3、实现语言翻译 三、整合 ElementUI 语言包 1、扩展中文 2、扩展英文  3、使用扩展语言翻译 四、问题记录 五、扩展 vue3 中使用 vue-i18n 如果在一个模块系统中使用它,你必须通过  Vue.use()  明确地安装  vue-i18n

    2024年03月14日
    浏览(52)
  • 【Vue】使用 vue-i18n 报错问题解决(一)

    初始化好前端项目后,准备使用vue中文插件i18n,代码里加载好插件,重启项目发现页面无法跳转至首页,呈空白 a.右击打开检查 b.查看console c.报错信息 具体报错内容: ssage-compiler.esm-bundler.js:54 Uncaught (in promise) SyntaxError: Not available in legacy mode (at message-compiler.esm-bundler.js:54:1)

    2024年02月16日
    浏览(32)
  • 【chrome扩展开发】vue-i18n使用问题及解决方案

    记录chrome扩展开发时调用vue-i18n的一些问题和解决方法 vue : ^3.3.4 vue-i18n : ^9.2.2 vite : ^4.4.8 Uncaught (in promise) EvalError: Refused to evaluate a string as JavaScript because \\\'unsafe-eval\\\' is not an allowed source of script in the following Content Security Policy directive: \\\"script-src \\\'self\\\' \\\'wasm-unsafe-eval\\\' \\\'inline-speculation-

    2024年02月14日
    浏览(42)
  • vue2+element-ui使用vue-i18n进行国际化的多语言/国际化

    注意:vue2.0要用8版本的,使用9版本的会报错 在src目录下,创建新的文件夹,命名为i18n zh.js en.js index.js main.js 使用方式一 效果图 使用方式二 效果图 使用方式三,在 效果图 ` 注意:这种方式存在更新this.$i18n.locale的值时无法自动切换的问题,需要刷新页面才能切换语言。解

    2024年02月07日
    浏览(73)
  • vue-i18n国际化多语言与多套UI组件库使用(Element Plus、Ant Design Vue、Naive UI)

    demo源码:Vue3 UI Lang 因调研需要,需在同一个项目中集成好几种UI组件库的多语言实现,查看各种组件库的表现情况,以便选定组件库。 注意:这只在调研过程中会如此,实际开发项目中极少存在一个项目中集成多个UI组件库的情况。 本demo实际试验阿拉伯语、法语、葡萄牙语

    2024年02月08日
    浏览(53)
  • vue-i18n 实现国际化,支持切换不同语言

    需求:后台管理系统,可以实现语言切换 实现过程:用的i18n来实现的语言切换,网上能看到好多模板,根据自己的需求,修改一下即可使用,大概都是差不多的,因为涉及到后端,所以要跟后端协商一致决定去写,我的设计思路是跟着后端设计更改的,如下: 1.语言是后端接

    2024年02月12日
    浏览(43)
  • 扩展 jQurey.i18n.properties 的能力来向 vue-i18n 靠齐

    jQuery.i18n.properties 是 jQuery 老项目的国际化框架,其实国际化方案本质上都大同小异,都是需要用翻译函数包裹词条,然后根据词条文件来进行翻译 就是使用上与其他框架不太一样而已 但由于我们已经基于 vue 框架实现了一个国际化自动处理脚本,脚本会自动用全局函数包裹

    2024年02月03日
    浏览(34)
  • uniapp国际化npm install vue-i18n报错

    在vue2环境下,默认安装 npm install vue-i18n 的版本是 vue-i18n@9.1.9,所以报错。 用以上命令查看版本:  vue2建议5.0版本  

    2024年02月12日
    浏览(46)
  • 服务端使用ASP.NET Core SignalR与Vue3(TypeScript与JavaScript)前端建立通信(以进度条为例)

    1. ASP.NET Core           ASP.NET Core 是一个跨平台、高性能及开源的框架,用于生成基于云且连接互联网的新式应用程式。 官方文档:ASP.NET documentation | Microsoft Learn  2.  ASP.NET Core SignalR         ASP.NET Core SignalR 是开源库,用于服务端与客户端建立实时通信,可以自动管理连接

    2024年02月06日
    浏览(48)
  • 前端技术Html,Css,JavaScript,Vue3

    1.基本标签 2.文本格式化 3.链接 4.图片 5.无序列表 6.有序列表 7.表格 8.表单 1.选择器 2.文本和字体 3.链接 4.隐藏 5.定位position 6.浮动 7.对齐 8.图像 1.输出 2.函数 3.常用事件 4.DOM 5.改变Html 6.DOM 元素 (节点) 尾部创建新的 HTML 元素 (节点) - appendChild() 头部创建新的 HTML 元素 (节点)

    2024年02月13日
    浏览(53)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包