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))


}

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM