vue项目国际化多语言（若语言包过大，则可以考虑与后台配合处理）

近期完成了一个移动端的项目，实现了三种语言。利用的是i18n插件，有一个问题就是：当语言包过大的时候，项目运行起来比较慢。此时我们处理方法是，将一些动态的文字由后台传给前端，语言包只存储不变的一些文字。

1、安装

npm install vue-i18n --save

2、如下图建立对应的项目文件结构

3、在assets文件夹下i18n文件夹里面的en.js和ft.js如下：

• en.js文件内容

/*英文包 en*/
export default {
   login:{
        'title' : 'Software system',
        'username' : 'Please enter the user name',
        'password' : 'Please enter your password',
        'login' : 'Login',
        'language' : 'Please select language'
    }
   
}

• ft.js文件内容

/*中文繁体语言 zh-CHT */
export default {
   login:{
        'title' : '軟件系統',
        'username' : '請輸入用戶名',
        'password' : '請輸入密碼',
        'login' : '登錄',
        'language' : '請選擇語言'
    }
   
}

4、在tools文件夹中新建i18n.js文件,文件内容

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import en from '../assets/i18n/en'
import ft from '../assets/i18n/ft'

Vue.use(VueI18n)

// 以下为语言包单独设置的场景，单独设置时语言包需单独引入
const messages = {
  'zh-CHT':ft, //中文繁体语言包
  'en': en  // 英文语言包
}

export default new VueI18n({
  locale : "en", // set locale 默认显示英文
  messages : messages // set locale messages
})

5、最后在main.js里面全局引入并挂载

//...其他代码

//引入多语言支持
import i18n from './tools/i18n'

//...其他代码

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

6、使用示例 比如在login.vue组件中

//template
<h3>{{$t("login.title")}}</h3>
<button @click='langToggle'>en/中</button>

//js    在js使用时则为 this.$t("login.title")
methods:{
  langToggle(){   //切换语言
      if(this.$i18n.locale = 'zh-CHT'){
        this.$i18n.locale = 'en';
      }else{
        this.$i18n.locale = 'zh-CHT';
      }
  }
}