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