使用vue2+element+vue-admin-template创建单页应用小记-3.添加语言包切换

安装il8n
命令进入项目根目录，执行命令安装vue-i18n
```
npm install vue-i18n --save
```

@/src/main.js文件修改，添加以下代码（同原代码重复部分可忽略）(@代表项目根路径，下同)

import i18n from './lang'


Vue.use(ElementUI, {
  locale,
  i18n: (key, value) => i18n.t(key, value)
})

new Vue({
  el: '#app',
  router,
  store,
  i18n,
  render: h => h(App)
})

@/src/store/modules/app.js代码修改：

mutations中添加如下方法代码：

  SET_LANGUAGE: (state, language) => {
      state.language = language
      Cookies.set('language', language)
    }

actions中添加如下方法代码：

setLanguage({ commit }, language) {
      commit('SET_LANGUAGE', language)
    }

添加@/src/lang/文件夹

添加index.js

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import Cookies from 'js-cookie'
import elementEnLocale from 'element-ui/lib/locale/lang/en' // element-ui lang
import elementZhLocale from 'element-ui/lib/locale/lang/zh-CN'// element-ui lang
import enLocale from './en'
import zhLocale from './zh'

Vue.use(VueI18n)

const messages = {
  en: {
    ...enLocale,
    ...elementEnLocale
  },
  zh: {
    ...zhLocale,
    ...elementZhLocale
  }
}

const i18n = new VueI18n({
  // set locale
  // options: en or zh
  locale: Cookies.get('language') || 'zh',
  // set locale messages
  messages
})

export default i18n

添加翻译文件，名称同index messages变量里的下标（上例 en zh）（element项目里存在lang文件夹可以引入直接使用），翻译文件为多维数组，按照使用地方进行分类管理，如：

table: {
    title: '标题',
    type: '类型',
    search: '搜索',
    add: '添加',
    export: '导出',
    id: '序号',
    date: '时间',
    author: '作者',
    status: '状态',
    actions: '操作',
    edit: '编辑',
    publish: '发布',
    draft: '草稿',
    delete: '删除',
    cancel: '取 消',
    confirm: '确 定'
  },

lang文件参考地址：https://github.com/PanJiaChen/vue-element-admin/tree/master/src/lang

添加中英文切换按钮
1. @src/components文件夹添加LangSelect，参考地址：https://github.com/PanJiaChen/vue-element-admin/tree/master/src/components/LangSelect
2. 修改@/src/views/lyout/Navbar.vue文件，添加选择按钮组件
  1. html中添加
  2. ```
   <lang-select class="international  right-menu-item"></lang-select>
```
  script中添加
```
  import LangSelect from '@/components/LangSelect'
  
   components: {
      Breadcrumb,
      Hamburger,
      LangSelect
    },
```
3. 样式问题自行修复
使用：
1. 在/src/lang/文件夹下的en.js zh.js 添加相应的中英文参数变量
2. 使用示例
  1. 标签：如 label=“用户姓名” 改成 :label=”$t(‘order.userName’)”
  2. html：{{$t(‘order.userName’)}}
  3. 在js中使用
    1. 在js使用的文件中（用单引号引起来），如
    2. 修改对应的vue文件

使用vue2+element+vue-admin-template创建单页应用小记-3.添加语言包切换

猜你喜欢