vue-i18n 多语言开发

Posted 2020-11-29 zxuedong

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>