vue 简单的国际化

准备工作

• 目录 ：
  
• en.js / zh.js

module.exports = {
    message: {
        title: 'Sport Brands'
    },
    placeholder: {
        enter: 'Please type in your favorite brand'
    },
    brands: {
        nike: 'Nike',
        adi: 'Adidas',
        nb: 'New Banlance',
        ln: 'LI Ning'
    }
}

module.exports = {
    message: {
        title: '运动品牌'
    },
    placeholder: {
        enter: '请输入您喜欢的品牌'
    },
    brands: {
        nike: '耐克',
        adi: '阿迪达斯',
        nb: '新百伦',
        ln: '李宁'
    }
}

引入

npm install vue-i18n

main.js 内容

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import VueI18n from 'vue-i18n';
Vue.use(VueI18n)
Vue.config.productionTip = false;

const i18n = new VueI18n({
  locale: localStorage.getItem('locale') || 'zh',  // 语言标识
  messages: {
      'zh': require('./assets/js/zh.js'),
      'en': require('./assets/js/en.js')
  }
})

new Vue({
  router,
  store,
  i18n,
  render: h => h(App)
}).$mount("#app");

使用

eg ： 初始化中的about.vue

<template>
  <div class="about">
    <h1>{{ $t("message.title") }}</h1> //vue-i18n 数据渲染的模板语法
    <button type="button" class="btn btn-success" @click="changeLocale">中文/EN</button>     
  </div>
</template>
<script>
export default {
  methods : {
    // js方法
    changeLocale : function() {
        let locale = this.$i18n.locale; //i18n自带的全局方法
        locale === 'zh' ? this.$i18n.locale = 'en' : this.$i18n.locale = 'zh';
        localStorage.setItem('locale', this.$i18n.locale); //添加缓存
    },
  }
}
</script>