关于vue-i18n在单文件js中的使用

更新时间：2022年09月08日 11:57:55 作者：艾欢欢

这篇文章主要介绍了关于vue-i18n在单文件js中的使用，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

vue-i18n在单文件js中使用

示例

import Vue from 'vue'
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
const i18n = new VueI18n({
  locale: localStorage.getItem('userLanguage') : 'zh', 
  messages: {
    'zh': require('../assets/i18n/zh'),  // 中文语言包
    'en': require('../assets/i18n/en')   // 英文语言包
  }
})
export default {
  // ...
  tipMsg: {
    // 使用
    phone: i18n.t('TipPhoneFormatError'), 
    password: i18n.t('Password'),
  }
};

i18n如何在js文件中生效

在vue项目中引用vue-i18n实现语言切换功能，开发过程中发现，在vue文件中使用都可以，但是在js文件中直接使用$t('zhKey.首页')是不生效的。

下面是我研究出的解决方法

// js文件中
import Vue from 'vue'
import VueI18n from 'vue-i18n'
import messages from 'unisoc-ui/js/i18n/langs'
Vue.use(VueI18n) // 这里一行是必须加的。
// 在该js文件中，单独注册一个i18n实例并引入语言文件
const i18n = new VueI18n({
  locale: localStorage.lang || 'Zh_CN',
  messages: messages
})
let mainNavlist = [] 
mainNavlist = [
  {
    icon: 'iconuser',
    title: i18n.t('zhKey.首页'),
    url: '/'
  }
]

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

vue+js实现微信上传图片选择功能
这篇文章主要为大家详细介绍了vue+js实现微信上传图片选择功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-07-07
uniapp中easycom用法实例详解
easycom是Uniapp框架中非常方便的组件自动注册机制，可以大大简化组件的使用和管理，这篇文章主要介绍了uniapp中easycom用法详解,需要的朋友可以参考下
2023-03-03
vue3:setup的两个注意点详解
这篇文章主要介绍了vue3.0中setup的两个注意点，本文通过两种用法给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2021-10-10
vue卡片式点击切换图片组件使用详解
这篇文章主要为大家详细介绍了vue卡片式点击切换图片组件的使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-06-06
vue3中虚拟dom的介绍与使用详解
Vue 是如何将一份模板转换为真实的 DOM 节点的,又是如何高效地更新这些节点的呢,这些都离不开虚拟dom这个概念,下面我们就来了解下虚拟dom这个概念以及它是什么吧
2024-01-01
vue2.0 下拉框默认标题设置方法
今天小编就为大家分享一篇vue2.0 下拉框默认标题设置方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-08-08
详解基于Vue cli开发修改外部组件Vant默认样式
这篇文章主要介绍了详解基于Vue cli开发修改外部组件Vant默认样式,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-04-04
vue实现多级菜单效果
这篇文章主要为大家详细介绍了vue实现多级菜单效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-10-10
vue实现PC端录音功能的实例代码
这篇文章主要介绍了vue实现PC端录音功能的实例代码，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
2019-06-06
关于vue-admin-element中的动态加载路由
这篇文章主要介绍了关于vue-admin-element的动态加载路由，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-08-08