nuxt + element + i18n 国际化element（我用的i18n@8.x版本）

locales文件，存放中英文配置

 

 

 

 

plugins/element-ui.js:这里是按需加载配置，其实跟国际化没关系。主要是配置下边的i18n.js

 

// plugins/element-ui.js

import Vue from 'vue'


// 按需引用
import {
  Pagination,
  Dialog,

  Dropdown,
  DropdownMenu,
  DropdownItem,

  Input,
  InputNumber,
  Radio,
  RadioGroup,
  RadioButton,

  Select,
  Option,

  Button,

  Table,
  TableColumn,

  Popover,

  Form,
  FormItem,

  Tabs,
  TabPane,

  Icon,

  Rate,

  Backtop,

  Loading,
  MessageBox,
  Message,
  Notification
} from 'element-ui'

// 自定义主题样式(这里我们会在这个文件内引入我们所需的组件的样式)
import '../assets/scss/element-variables.scss'

// Vue.use(Element, { locale })//国际化element

Vue.use(Pagination)
Vue.use(Dialog)

Vue.use(Dropdown)
Vue.use(DropdownMenu)
Vue.use(DropdownItem)

Vue.use(Input)
Vue.use(InputNumber)
Vue.use(Radio)
Vue.use(RadioGroup)
Vue.use(RadioButton)

Vue.use(Select);
Vue.use(Option);

Vue.use(Button)

Vue.use(Table)
Vue.use(TableColumn)

Vue.use(Popover)

Vue.use(Form)
Vue.use(FormItem)

Vue.use(Tabs)
Vue.use(TabPane)

Vue.use(Icon)

Vue.use(Rate)

Vue.use(Backtop)

Vue.use(Loading.directive);

Vue.prototype.$loading = Loading.service;
Vue.prototype.$msgbox = MessageBox;
Vue.prototype.$alert = MessageBox.alert;
Vue.prototype.$confirm = MessageBox.confirm;
Vue.prototype.$prompt = MessageBox.prompt;
Vue.prototype.$notify = Notification;
Vue.prototype.$message = Message;

 

plugins/i18n.js

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import Storage from '@/utils/storage'
import enLocale from 'element-ui/lib/locale/lang/en'
import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
import en from '~/locales/en.json'
import zh from '~/locales/zh.json'
import elementLocale from 'element-ui/lib/locale'

Vue.use(VueI18n)

export default ({ app, store }) => {
  // Set i18n instance on app
  // This way we can use it in middleware and pages asyncData/fetch

  app.i18n = new VueI18n({
    locale: store.state.locale,
    fallbackLocale: store.state.locale || 'cn',
    messages: {
      'zh': {
        ...require('~/locales/zh.json'),
        ...zhLocale
      },
      'en': {
        ...require('~/locales/en.json'),
        ...enLocale
      }
    }
  })


  app.i18n.path = (link) => {
    // 如果是默认语言，就省略
    if (app.i18n.locale === app.i18n.fallbackLocale) {
      return `/${link}`
    }

    return `/${app.i18n.locale}/${link}`
  }
  // 按需加载配置element
  elementLocale.i18n((key, value) => app.i18n.t(key, value))


}