vue-i18n vue-cli項目中實現國際化 多語言切換功能 一

vue-cli項目中引入vue-i18n

安裝：

npm install vue-i18n可參考vue-i18n官網文檔

main.js中引入：

import Vue from 'vue'

import VueI18n from 'vue-i18n'

Vue.use(VueI18n)

配置語言包（main.js）:

const i18n = new VueI18n({
  locale: 'zh-CN', // 語言標識, 經過切換locale的值來實現語言切換,this.$i18n.locale
  messages: {
    'zh-CN': require('./common/lang/zh'), // 中文語言包
    'en-US': require('./common/lang/en') // 英文語言包
  }
})
new Vue({
  el: '#app',
  i18n, // 加入
  router,
  store,
  components: { App },
  template: '<App/>'
})

語言相關包（zh.js、en.js）:

zh.js:

export const lang = {
  menu: [
    {name: '首頁', path: ''},
    {name: '企業簡介', path: ''},
    {name: '企業輿情', path: ''},
    {name: '標籤管理', path: ''},
    {name: '採集管理', path: ''},
    {name: '關於咱們', path: ''},
    {name: '哈哈哈哈', path: ''}
  ],
  login: '登陸',
  register: '註冊',
  welcome: '歡迎',
  logout: '退出'
}

en.js:

export const lang = {
  menu: [
    {name: 'HomePage', path: ''},
    {name: 'BusinessIntro', path: ''},
    {name: 'BusinessInfo', path: ''},
    {name: 'TagManage', path: ''},
    {name: 'CollectManage', path: ''},
    {name: 'AboutUs', path: ''},
    {name: 'hahahaha', path: ''}
  ],
  login: 'login',
  register: 'register',
  welcome: 'welcome',
  logout: 'logout'
}

語言切換：

this.$i18n.locale = 'en-US'// 切換成英文
this.$i18n.locale = 'zh-CN'// 切換成中文

使用（同於vue中對於文字數據的渲染，有以「{{ }}」或v-text、v-html等的形式，一樣的使用語言國際化（vue-i18n）後，依舊能夠沿用）：

<el-menu-item
      v-for="(item,index) in $t('lang.menu')"
      :key="index"
      :index="item.path"
      :route="item.path">{{ item.name }}</el-menu-item>
<router-link
      class="eff"
      to="/login">{{ $t('lang.login') }}</router-link>
<router-link to="/register">{{ $t('lang.register') }}</router-link>

eg:

v-text:

<span v-text=」$t(‘lang.welcome’)」></span>

{{ }}:

<span>{{ $t(‘lang.welcome’) }}</span>

以上爲基本用法，進階用法高級用法見後續相關文章，這裏主要是不讓你們一下接觸太多而混淆

原創，轉載請註明出處微笑空間站