vue-i18n

最新推荐文章于 2024-07-27 10:15:50 发布

28k纯帅

最新推荐文章于 2024-07-27 10:15:50 发布

阅读量168

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/aaaliuwei/article/details/107173881

版权

vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

新建VueI18n.js

import Vue from 'vue'

import VueI18n from 'vue-i18n'

Vue.use(VueI18n)

const i18n = new VueI18n({

    locale:"zh_CN",

    messages:{

      'zh_CN' : require('./i18n/zh'),

      'en_US': require('./i18n/en'),

      'ja_JP': require('./i18n/ja')

    }

})

export default i18n;

main.js

import i18n from './utils/VueI18n' //导入新建VueI18n.js

new Vue({

  el: '#app',

  router,

  store,

  i18n,

  render: h => h(App)

})

//vue组件模板的使用
<div>{{$t('message.zh')}}</div>

//vue组件模板数据绑定的使用
<input :placeholder="$t('message.zh')"></input>

//vue组件data中赋值的使用
data:{
msg:this.$t('message.zh');
}

//js文件中赋值
import i18n from 'VueI18n.js';

console.log(i18n.t('message.zh'));