4. vue i18n国际化 切换中英文

最近在做的一个网站需要加上一个英文版（看过之前文章的会知道），点击按钮切换中文/英文，在这里记录下实现过程。

需求：网站实现中英文切换
项目环境：vue + vue-cli + element-ui

1、首先 npm 安装 i18n 国际化插件：npm install vue-i18n --save；

2、在 src 下新建一个目录 i18n（目录名随意），新建i18n.js文件，再建一个子文件目录 langs，里面包含 cn/en/index.js文件，目录结构如下：

image.png

3、把安装好的 i18n 引入 main.js 文件中，并且在 app 根组件中注入；

import i18n from './i18n/i18n'

window.app = new Vue({
  el: '#app',
  router,
  store,
  i18n,  //注入根目录下，千万不能忘记
  components: { App },
  template: '<App/>'
})

4、这里需要用的存储store，在src下新建store, index.js文件

import Vue from 'vue'
import Vuex from 'vuex'  //引入vuex之前，先npm安装  npm install vuex  --save

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    lang: localStorage.lang || 'cn'
  },
  mutations: {
    switchLang (state, lang) {
      state.lang = lang
      window.app.$i18n.locale = lang
      localStorage.setItem('lang', lang)
    }
  },
  actions: {}
})

5、开始在 i18n.js 中编写代码；

import Vue from 'vue'
import locale from 'element-ui/lib/locale'   // element-ui 国际化
import VueI18n from 'vue-i18n'
import messages from './langs'  // 这里是调用 langs/index.js

Vue.use(VueI18n)

const i18n = new VueI18n({
  locale: localStorage.lang || 'cn',   // 语言标识
  messages
})
locale.i18n((key, value) => i18n.t(key, value))  // 重点：为了实现element插件的多语言切换

export default i18n

6、langs目录下的 index.js文件；

import en from './en'
import cn from './cn'
export default {
  cn,
  en
}

7、langs目录下的 en.js 文件；

import enLocale from 'element-ui/lib/locale/lang/en'  // element-ui 国际化 英文

// 这里把翻译好的英文以对象的格式包裹起来，建议以模块来划分，这样在调用起来方便效率，举例说明：导航菜单栏
const en = {
  navbar: {  // 取导航的英文来包裹其内的子对象
    'home': 'Home',  //前面的第一个英文home为页面将调用的
    'Product description': 'Product description',
    'Login': 'Login',
    'Register': 'Register',
    'Simplified Chinese': 'Simplified Chinese'
  },
    ...enLocale
}
 export default en    // vuex方法，映射到英文上

image.png
image.png

8、langs目录下的 cn.js 文件；

import zhLocale from 'element-ui/lib/locale/lang/zh-CN'   // element-ui 国际化 中文

 // 同理en.js文件，只是这里改成中文了
const cn = {
  navbar: {
    'home': '首页',
    'Product description': '产品介绍',
    'Login': '登录',
    'Register': '注册',
    'Simplified Chinese': '简体中文'
  },
    ...zhLocale  // vuex方法，映射到中文上
}
export default cn

9、逻辑部分；

export default {
  name: '',
  data () {
    return {
      lang: 'cn',   // 因为网站默认是中文的，默认初始化为中文
      is_en: true  // （因样式问题自己单独写的）
    }
  },
methods｛
  handleCommand (command) {
      // 点击切换为英文
      if (command === 'en') { // command 是element-ui 下拉框的用法，具体可参考官方文档
        this.lang = 'en'
        this.is_en = true  // 当点击切换成英文后，此样式生效（因样式问题自己单独写的）
      } else {
        this.lang = 'cn'
        this.is_en = false
      }
      this.$store.commit('switchLang', this.lang)  // 这里的switchLang是调用store/index.js中mutations里的switchLang
    }
  },
 created () {
    // 点击切换英文后调用此样式（这里是点击英文后页面部分的样式有点变化，我自己单独写的动态class方法）
    if (this.$store.state.lang === 'en') {
      this.is_en = true
    } else {
      this.is_en = false
    }
}

// 这里主要是对应动态class部分，如果同时需要绑字两个动态class，那么可以以数组的的方式给包裹起来
<span class="product_content" :class="[{product_content_1920:is_1920},{product_content_en:is_en}]">{{this.$t('product.productContent')}}</span>

10、最后把首页部分全部替换成英文，然后点击切换中英后页面就得到英文了。

image.png image.png