vue中使用国际化基础使用

cdn方式使用

1.引入

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-i18n/dist/vue-i18n.js"></script>

vue-i18n要在vue之后引入

2.使用

js

const messages = {
    'zh_CN': {
        'hello': '你好 {name}',
    },
    'en_US': {
        'hello': 'hello {name}',
    }
}

var i18n = new  VueI18n({
    locale: 'zh_CN',
    messages
})
var vm = new Vue({
    data: {
        
    },
    el: '#root',
    i18n,
    methods: {
        toggleLang : function(){
            let lang = this.$i18n.locale //当前语言
            this.$i18n.locale = lang==='zh_CN' ? 'en_US' : 'zh_CN' //重新设置
        }
    },
    computed: {
        lang: function(){
            switch (this.$i18n.locale) {
                case 'zh_CN': return '中文';
                case 'en_US': return '英文';
                default: return '其他';
            }
        }
    }
})

html

<div>
    <div>当前语言: {{ lang }}</div>
    <div>{{ $t('hello', { name:'vue' } ) }}</div>
    <button @click="toggleLang">切换语言</button>
</div>    

3.效果

vue-cli项目中使用

1.安装
npm install vue-i18n

2.使用
入口文件main.js增加以下代码

import VueI18n from 'vue-i18n'
Vue.use(VueI18n)

// 可以创建i18n文件夹，拆分国际化文件 最后import引入
const messages = {      // 国际化保存对象
    'zh_CN': {
        'hello': '你好 {name}',
    },
    'en_US': {
        'hello': 'hello {name}',
    }
}

const i18n = new VueI18n({
  locale: 'zh_CN',
  messages,
})



new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>',
  i18n  //引用
})

模板

<template>
   <div>
     <div>当前语言: {{ lang }}</div>
     <div>{{ $t('hello', { name:'vue' } ) }}</div>
     <button @click="toggleLang">切换语言</button>
   </div>     
</template>

script

export default {
    name: 'testLang',
    methods: {
        toggleLang () {
            let lang = this.$i18n.locale //当前语言
            this.$i18n.locale = lang==='zh_CN' ? 'en_US' : 'zh_CN' //重新设置
        }
    },
    computed: {
        lang () {
            switch (this.$i18n.locale) {
                case 'zh_CN': return '中文';
                case 'en_US': return '英文';
                default: return '其他';
            }
        }
    }
}

效果和cdn方式一样