i18n在vue项目中替换js文件中的文本

项目中使用i18n,可能使用的场景比如在script中和模板中,也可能在js文件中,那么具体都是怎么使用呢?

中英文封装

export default  {

message: ‘xxx’

在template中使用 { {$t('message')}}

在script中使用 this.$('message')

如果要在js文件中使用,详细如下

封装i18n.js

import VueI18n from 'vue-i18n'
import Vue from 'vue'
Vue.use(VueI18n) // 通过插件的形式挂载
// 引入ivew的国际化js
import en from 'iview/dist/locale/en-US'
import zh from 'iview/dist/locale/zh-CN'

let getMyStorage = JSON.parse(sessionStorage.getItem('language'))
const i18n = new VueI18n({
  locale: getMyStorage || 'zh_CN',
  messages: {
    // 'ft-CN': require('./lang/ft.js').default,
    'zh_CN': Object.assign(require('../lang/zh').default, zh),
    'en_US': Object.a
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue使用i18n国际化,可以在vue文件使用`$t`方法获取文本信息,也可以在js文件使用`$t`方法获取文本信息。对于js文件使用方式,可以参考下面的步骤: 1. 在Vue实例引入和初始化i18n插件,并在Vue实例传入i18n实例。具体代码如下: ```javascript import Vue from 'vue' import VueI18n from 'vue-i18n' import messages from './lang' Vue.use(VueI18n) const i18n = new VueI18n({ locale: 'zh-CN', messages }) new Vue({ i18n, render: h => h(App) }) ``` 其,`messages`是一个对象,包含了所有语言的key-value对。 2. 在js文件,通过`Vue.prototype.$t`方法获取对应语言的文本信息。具体代码如下: ```javascript import Vue from 'vue' Vue.prototype.$t('message.hello') ``` 其,`message.hello`是对应语言的key值,可以根据需要进行修改。如果需要获取带有变量的文本信息,则可以使用`$t`方法的第二个参数,如下所示: ```javascript Vue.prototype.$t('message.welcome', { name: 'John' }) ``` 其,`message.welcome`是对应语言的key值,`{ name: 'John' }`是一个对象,包含了需要替换的变量信息,可以在对应语言的value值使用`{变量名}`进行替换。例如: ```javascript const messages = { 'zh-CN': { welcome: '欢迎{name}使用本系统' }, 'en-US': { welcome: 'Welcome {name} to use this system' } } ``` 以上就是在Vue使用i18n国际化的基本流程和js文件使用`$t`方法的示例代码。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值