vue-i18n

安装

yarn add vue-i18n

基础

• lang > index.js

  :::details 点击查看代码

  import Vue from 'vue'
  import VueI18n from 'vue-i18n'
  import zh from './zh'
  import en from './en'
  
  Vue.use(VueI18n)
  
  const i18n = new VueI18n({
  locale: 'zh',
  messages: {
      'zh': {
      ...zh
      }, // 中文语言包
      'en': {
      ...en
      } // 英文语言包
  },
  silentTranslationWarn: true // 关闭警告
  })
  
  export default i18n

  :::

• lang > en.js

  :::details 点击查看代码

  export default {
      name:'name'
  }

  :::

• lang > zh.js

  :::details 点击查看代码

  export default {
      name:'名字',
      like:'{ball}'
  }
  

  :::

• main.js

  :::details 点击查看代码

  import Vue from 'vue'
  import App from './App.vue'
  import router from './router'
  import store from './store'
  import i18n from './lang'
  
  
  Vue.config.productionTip = false
  
  new Vue({
  router,
  store,
  i18n,
  render: h => h(App)
  }).$mount('#app')
  

  :::

• home.vue

  :::details 点击查看代码

  <template>
  <div id="app">
      <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
      </div>
      <router-view />
  </div>
  </template>
  
  <script>
  export default {
  name: "Home",
  mounted(){
      console.log(this.$t('name'));
      console.log(this.$t('like',{ball:'篮球'}));
  }
  };
  </script>

  :::