vue项目配置国际化

386 阅读1分钟

1. 下载vue-i18n

npm i vue-i18n

2. 修改main.js

import VueI18n from 'vue-i18n'
import enLocale from 'element-ui/lib/locale/lang/en'
import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
import customEnLocal from '@/i18n/lang/en'
import customZhLocal from '@/i18n/lang/zh-CN'

Vue.use(VueI18n)
const messages = {
  en: {
    ...enLocale,
    ...customEnLocal,
  },
  zh: {
    ...zhLocale,
    ...customZhLocal,
  },
}
const i18n = new VueI18n({
  locale: 'zh', // set locale
  messages, // set locale messages
})
Vue.use(ElementUI, {
  i18n: (key, value) => i18n.t(key, value),
})

new Vue({
  i18n, // new Vue中加入i18n
  router,
  store,
  render: h => h(App)
}).$mount('#app')

export { i18n }

3. 创建中英文转化文件

en.js

export default {
  base: {
    button: {
      query: 'Query',
    },
  },
}

zh-CN.js

export default {
  base: {
    button: {
      query: '查询',
    },
  },
}