返回顶部
首页 > 资讯 > 前端开发 > JavaScript >关于vue-i18n在单文件js中的使用
  • 538
分享到

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

2024-04-02 19:04:59 538人浏览 安东尼
摘要

目录Vue-i18n在单文件js中使用示例i18n如何在js文件中生效下面是我研究出的解决方法vue-i18n在单文件js中使用 示例 import Vue from 'vue' i

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: '/'
  }
]

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。

--结束END--

本文标题: 关于vue-i18n在单文件js中的使用

本文链接: https://lsjlt.com/news/167143.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • 关于vue-i18n在单文件js中的使用
    目录vue-i18n在单文件js中使用示例i18n如何在js文件中生效下面是我研究出的解决方法vue-i18n在单文件js中使用 示例 import Vue from 'vue' i...
    99+
    2024-04-02
  • Vue-i18n 在 JS 文件中的使用方法
    这篇文章主要介绍“Vue-i18n 在 JS 文件中的使用方法”,在日常操作中,相信很多人在Vue-i18n 在 JS 文件中的使用方法问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大...
    99+
    2024-04-02
  • vue.js中和使用 vue-i18n插件
    vue.js中和使用 vue-i18n插件,针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。安装方法1.使用CDN直接引用<script...
    99+
    2024-04-02
  • 关于vue文件中index.vue的使用方法
    目录vue文件中index.vue使用vue的index.html总结为啥要有index.html单页面应用index.html实战代码汇总vue文件中index.vue使用 <...
    99+
    2022-11-13
    vue index.vue index.vue的使用 vue使用index.vue
  • 关于vue-tree-chart简单的使用
    目录vue-tree-chart的使用插件安装组件内容:vart.vue页面中使用vue-tree-chartview视图 about组件封装的treeChart组件vue-tree...
    99+
    2022-11-13
    vue-tree-chart Vue tree vue chart
  • 组件库中使用vue-i18n国际化的案例详解
    目录前言项目中使用 i18n组件库中使用 i18n需求未添加 i18n 前的组件库组件库 i18n 的配置文件组件库的输出文件组件库中使用 i18n项目中使用组件库和 i18n页面展...
    99+
    2023-05-18
    vue-i18n 国际化 vue-i18n 国际化使用
  • 关于js中e.preventDefault()的具体使用
    目录背景:问题:分析:持续跟进:总结e.preventDefault()与return false的区别背景: 同事在项目中遇到的问题,在项目中导入了某一个组件作为根组件之后,发现原...
    99+
    2023-05-16
    js e.preventDefault() e.preventDefault() return false
  • vue中关于el-popover的使用
    目录关于el-popover的使用vue点击关闭el-popover总结关于el-popover的使用 trigger属性用于设置何时触发 Popover,支持四种触发方式:hove...
    99+
    2023-05-15
    vue中el-popover el-popover的使用 vue使用el-popover
  • Vue中的非单文件组件如何使用
    本篇内容介绍了“Vue中的非单文件组件如何使用”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!一,什么是组件实现应用中局部功能代和资源的集合(...
    99+
    2023-07-05
  • js中关于promise怎么使用
    这篇文章主要介绍“js中关于promise怎么使用”,在日常操作中,相信很多人在js中关于promise怎么使用问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”js中关于promise怎么使用”的疑惑有所帮助!...
    99+
    2023-07-05
  • vue项目中js文件使用vue的this实例说明
    目录vue中其他.js文件使用this实例main.js中导出vuerequest.js中导入main.js并使用vue模板使用this问题vue中其他.js文件使用this实例 在...
    99+
    2022-12-08
    vue项目js文件 vue的this js文件使用vue的this
  • VUE 单文件组件在大型项目中的应用
    组件化和可重用性 SFC 允许将组件封装在单独的文件中,从而实现代码的模块化。每个组件都有自己的模板、样式和脚本,可以独立开发和维护。这使得大型项目的开发变得更加高效,因为团队成员可以专注于特定的组件,而无需担心整体应用程序的结构。 此外...
    99+
    2024-04-02
  • vue引用public的js文件
    vue引用public中js文件的方法:1.首先在项目中创建一个公共(public)的js文件;2.在main.js中使用import命令函数引入公共js并注册;3.通过this方法调用js文件即可。具体操作步骤:创建公共JS(utils....
    99+
    2024-04-02
  • 分离vue文件中css、js代码的简单技巧
    目录场景方法index.vue 基础代码index.scss 基础代码index.js 基础代码拓展代码总结场景 1、因为早期是iOS开发,形成的MVC习惯,个人喜欢css、js代码...
    99+
    2024-04-02
  • 如何使用单文件组件.vue
    小编给大家分享一下如何使用单文件组件.vue,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!vuejs 自定义了一种.vue文件,...
    99+
    2024-04-02
  • Vue如何引用public中的js文件
    目录如何引用public中的js文件vue引用公共js步骤如何引用public中的js文件 在public文件夹下创建config.js文件。 config.js中可以使用变量,也可...
    99+
    2024-04-02
  • 基于axios在vue中的使用
    目录一、Axios是什么二、Axios有哪些特性三、Axios浏览器支持四、安装1.使用 npm2.使用 bower3.使用 cdn五、用法(vue项目已搭建)1. Axios基础用...
    99+
    2024-04-02
  • vue如何使用多文件单文件组件
    这篇文章主要为大家展示了“vue如何使用多文件单文件组件”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“vue如何使用多文件单文件组件”这篇文章吧。多文件单文件组件这是 SFC 的一个鲜为人知的功...
    99+
    2023-06-27
  • 关于Vue中this.$set的正确使用
    this.#set(obj, key, value) 我们在项目开发的过程中,经常会遇到这种情况:为data中的某一个对象添加一个属性 <template> <...
    99+
    2022-12-09
    this.$set的使用 vue this.$set
  • vue-router中关于children的使用方法
    目录关于children的使用children的使用场景router配置中children配置不起作用关于children的使用 children的使用场景 比如页面左侧显示菜单,右...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作