vue多语言国际化

今天项目提出一个多语言的需求,了解了一下vue可以使用i18n插件来实现该效果,记一下笔记,说明自己参考网上的资料的实现过程

• i18n在vue项目里的使用

1. 引入

  npm i vue-i18n -S

1. 文件结构如下

   
   
2. 为了使项目结构更清晰,我们单独在tools文件夹中新建i18n.js文件,文件内容

import Vue from 'vue'
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)

// 以下为语言包单独设置的场景，单独设置时语言包需单独引入
const messages = {
  'zh_CN': require('../assets/i18n/zh'),   // 中文语言包
  'en_US': require('../assets/i18n/en')    // 英文语言包
}

// 最后 export default，这一步肯定要写的。
export default new VueI18n({
  locale : 'en', // set locale 默认显示英文
  messages : messages // set locale messages
})

3. 然后在main.js里面全局引入并挂载

//...其他代码

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

//...其他代码

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

1. 在assets/i18n里面的zh.js和cn.js如下
2. zh.js

  /* 国际化zh_cn */

module.exports = {
    login:{
        'title' : '软件系统',
        'username' : '请输入用户名',
        'password' : '请输入密码',
        'login' : '登录',
        'language' : '请选择语言'
    },
    
}

1. en.js

module.exports = {
    login:{
        'title' : 'Software system',
        'username' : 'Please enter the user name',
        'password' : 'Please enter your password',
        'login' : 'Login',
        'language' : 'Please select language'
    },
}

1. 这样我再组件login.vue里面就可以使用了

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

//js
methods:{
  langToggle(){
      if(this.$i18n.locale = 'zh_CN'){
        this.$i18n.locale = 'en_US';
      }else{
        this.$i18n.locale = 'zh_CN';
      }
  }
}