vue-i18n安装和实现国际化,$t的用法

  • Post author:
  • Post category:vue


1.安装

yarn install vue-i18n

也可以直接引入

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

2.使用

在src/main.js引入i18n

// ie polyfill
import '@babel/polyfill'

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store/'
import i18n from './lang'
import { VueAxios } from './utils/request'

// mock
import './mock'

import bootstrap from './core/bootstrap'
import './core/use'
import './permission' // permission control
import './utils/filter' // global filter

Vue.config.productionTip = false

// mount axios Vue.$http and this.$http
Vue.use(VueAxios)

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

使用$t方法实现国际化

<span>{{ $t('header.HeadMenu.logout') }}</span>

或者用v-text

<span v-text="$t('header.HeadMenu.logout')"></span>

转载于:https://www.cnblogs.com/cxscode/p/11177731.html