码迷,mamicode.com
首页 > 编程语言 > 详细

vue-i18n 多语言开发

时间:2020-05-08 19:56:41      阅读:85      评论:0      收藏:0      [点我收藏+]

标签:ext   out   color   route   sage   ons   style   不同   语言切换   

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-i18n 多语言开发

标签:ext   out   color   route   sage   ons   style   不同   语言切换   

原文地址:https://www.cnblogs.com/zxuedong/p/12852644.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!