VUE项目框架在JS文件中使用i18n做国际化

前提在main.js文件中引入i18n

import Vue from 'vue'
import i18n from '@/locales/index'

在locales下的index.js文件中定义

const i18n = new VueI18n({
  locale: lang, // set locale
  messages // set locale messages
})
locale.i18n((key, value) => i18n.t(key, value))
export default i18n

在其他js文件中引入i18n,使用i18n.t调用即可

import i18n from '@/locales/index'
export const tableList1 = [
  {
    prop: 'test1',
    label: i18n.t('message.test1_label')
  },
  {
    prop: 'test2',
    label: i18n.t('message.test2_label')
  }
]

在vue文件可以直接使用,使用this.$t

<template>
  <div>
  	 <span slot="label">
          <i style="color: red">*</i>
          {{ $t('message.test3_name') }}
     </span>
      <el-form-item :label="$t('message.test4_name')">
          <el-input v-model="form.test5_name" disabled />
      </el-form-item>
  </div>
</template>
<script>
export default {
	data() {
		 return {
		  	name: this.$t('message.test6_name')
		  }
	}
}
</script>
  • 4
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
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`方法的示例代码。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值