zoukankan      html  css  js  c++  java
  • 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))
    
    
    }
  • 相关阅读:
    sigaction函数解析
    实战Nginx与PHP(FastCGI)的安装、配置与优化
    Linux下Nginx+PHP 简单安装配置
    Nginx安装配置PHP(FastCGI)环境的教程
    Linux上配置Nginx+PHP5(FastCGI)
    @JoinTable和@JoinColumn
    Spring Data JPA 之 一对一,一对多,多对多 关系映射
    MyChrome制作Chrome浏览器便携版
    注解@CrossOrigin解决跨域问题
    MySQL查看表结构及查看建表语句
  • 原文地址:https://www.cnblogs.com/duanzhenzhen/p/12674045.html
Copyright © 2011-2022 走看看