前端项目国际化-vue+vue-i18n

vue + vue-i18n

1.首先在main.js引入vue-i18n

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

2.然后引入语言包

const i18n = new VueI18n({
  locale: 'CN',    // 语言标识
  messages: {
    'CN': require('./assets/common/lang/zh.js'),   // 中文语言包
    'EN': require('./assets/common/lang/en.js')    // 英文语言包
  },
})
//语言包里可以如下定义
export const  message= {  //必须有导出export，另外两份语言包里面的定义结构要相同
    form:"switch the language",
    user:"userName",
    tel: "telephone",
    ID: "ID Number",
    button1:"search",
    button2: "reset",
}

3.将i18n 挂载到vue实例对象上

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

4.在需要的组件里引用,例如

<template>
    <div class="hello">
        <div class="left">
            <p>
                <label> {{ $t('message.form') }}</label>
                <select v-model="locale">
                    <option>CN</option>
                    <option>EN</option>
                </select>
            </p>
            <p>
                <label>{{$t('message.user') }} </label>
                <input type="text" />
            </p>
            <p>
                <label>{{$t('message.tel') }} </label>
                <input type="text" />
            </p>
            <p>
                <label>{{$t('message.ID') }} </label>
                <input type="text" />
            </p>
            <p>
                <button>{{$t('message.button1') }} </button>
                <button>{{$t('message.button2') }} </button>
            </p>
        </div>
        <div class="right">
            <img :src= "imgSrc"  />
        </div>
    </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      locale: 'CN',     
     }
  },
  watch:{
    locale(val){
        this.$i18n.locale = val
    }
  },
  computed:{
    imgSrc: function(){
        return require(`../images/${this.locale}/timg.jpg`) //注意这里是替换图片用的
    }
  }
}
</script>

如果此篇对你没有帮助，可以到这个地址查阅： https://segmentfault.com/a/1190000009058572