项目中vue-i18n的使用

1.安装

npm install vue-i18n

2.项目文件夹（一般名为lang或locales）中的index.js引入使用

import Vue from 'vue'
import VueI18n from 'vue-i18n'
// default lang
import zhCN from './lang/zh-CN'

Vue.use(VueI18n)

3.准备语言环境信息，将上面引入的./lang/zh-CN（另外专门放置语言信息的文件）拆开放入，当然可以在index.js中写更多，例如改变语言的funtion

const messages = {
  'zh-CN': {
    ...zhCN
  }
}

4.new对象暴露出去

const i18n = new VueI18n({
  //silentTranslationWarn: true,
  locale: defaultLang,  //set locale
  //fallbackLocale: defaultLang,
  messages
})

export default i18n

5.在项目main.js中导入挂载

import i18n from '@/appCore/locales';
new Vue({
    router,
    store,
    i18n,
    // init localstorage, vuex, Logo message
    created: bootstrap,
    render: h => h(App)
}).$mount('#app');

6.具体在组件中使用，$t("message.hello")

<a-input-password
              :placeholder="$t('user.login.password.placeholder')"
              v-decorator="[
                'password',
                {rules: [{ required: true, message: $t('user.password.required') }]}
              ]"
            >

 前面引入的zn-CN.js部分

export default {
  'user.login.userName': '用户名',
  'user.login.password.placeholder': '密码',
}

---

学习快乐！