i18n 国际化

i18n 国际化

国际化

组件内部默认使用中文，若希望使用其他语言，则需要进行多语言设置。以英文为例，在 main.js 中：

// 完整引入 Aui组件库
import Vue from 'vue'
import Aui from '@agree/aui-web' // 路径根据main.js文件的具体位置导入aui-web.js文件
import locale from '@agree/aui-web/locale/lang/en' // 路径根据main.js文件的具体位置引入语言文件

Vue.use(Aui, { locale })

兼容 vue-i18n@5.x

组件库 兼容 vue-i18n@5.x (opens new window)，搭配使用能更方便地实现多语言切换。

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import Aui from '@agree/aui-web'
import zhLocale from '@agree/aui-web/locale/lang/zh-CN'
import enLocale from '@agree/aui-web/locale/lang/en'

Vue.use(VueI18n)
Vue.use(Aui)

Vue.config.lang = 'zh-cn'
Vue.locale('zh-cn', zhLocale)
Vue.locale('en', enLocale)



// 组件内部切换语言
import Vue from 'vue';
// Vue.locale('zh-cn');
Vue.locale('en');

兼容其他 i18n 插件

如果不使用 vue-i18n@5.x，而是用其他的 i18n 插件，组件库 将无法兼容，但是可以自定义组件库的 i18n 的处理方法。

import Vue from 'vue'
import Aui from '@agree/aui-web'
import enLocale from '@agree/aui-web/locale/lang/en'
import zhLocale from '@agree/aui-web/locale/lang/zh-CN'

Vue.use(Aui, {
  i18n: function (path, options) {
    // ...
  }
})

兼容 vue-i18n@6.x

默认不支持 6.x 的 vue-i18n，你需要手动处理。

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import Aui from '@agree/aui-web'
import enLocale from '@agree/aui-web/locale/lang/en'
import zhLocale from '@agree/aui-web/locale/lang/zh-CN'

Vue.use(VueI18n)

const messages = {
  en: {
    ...enLocale // 或者用 Object.assign({ message: 'hello' }, enLocale)
  },
  zh: {
    ...zhLocale // 或者用 Object.assign({ message: '你好' }, zhLocale)
  }
}
// Create VueI18n instance with options
const i18n = new VueI18n({
  locale: 'en', // set locale
  messages, // set locale messages
})

Vue.use(Aui, {
  i18n: (key, value) => i18n.t(key, value)
})

new Vue({ i18n }).$mount('#app')


// 组件内部切换语言
// this.$i18n.locale = 'zh';
this.$i18n.locale = 'en';

目前 组件库 内置了以下语言：

• 简体中文（zh-CN）
• 英语（en）
• 繁体中文（zh-TW）