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方式同樣