vue-i18n 多语言开发

2020-05-08 19:56:58 阅读：242 来源： 互联网

vue-i18n

1.介绍：满足不同语言的切换，切换成中文，或者切换成英文，实现多语言切换功能

// 安装

npm install vue-i18n --save

// 在src新建目录lang，lang目录新建三个文件 zh.js  和  en.js 和 index.js


// zh.js文件中

module.exports = {
  user: {
    name: '你好'
  }
}



// en.js文件中

module.exports = {
  user: {
    name: 'hello'
  }
}



// index.js文件中

import Vue from 'vue'

// 引入使用
import VueI18n from 'vue-i18n'

Vue.use(VueI18n)

// 放置语言文件
const locales = {

  zh: require('./zh.js'),

  en: require('./en.js')

}


// 创建一个 VueI18n 实例

const i18n = new VueI18n({

    表示使用哪种语言渲染页面
  locale: 'en',

  messages: locales
})


export default i18n


// 在main.js中引入挂载到vue的实例

import i18n from './lang/index'

new Vue({
  router,
  store,
  render: h => h(App),
  i18n
}).$mount('#app')



// 在模板中使用

<template>
    
    <!--通过$t('对象吗.属性')调用->
    <div>{{ $t('user.name') }}</div>
</template>

<script>

export default {

    created () {


        // 可以通过  this.$i18n.locale = '要切换的语言'

         this.$i18n.locale = 'en
    }
}
</script>

标签：vue,zh,语言,js,en,i18n,VueI18n
来源： https://www.cnblogs.com/zxuedong/p/12852644.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

vue-i18n 多语言开发

vue-i18n