vue-cli与vue-i18n的整合

一共三个步骤：1、安装；2、引入；3、使用

---

1、安装

yarn add vue-i18n

或者

npm install vue-i18n

2、引入

在main.js入口文件添加：

import VueI18n from 'vue-i18n'
Vue.use(VueI18n)

const i18n = new VueI18n({
  locale: "zh", // 定义默认语言为中文
  messages: {
    zh: require("./assets/languages/zh.json"),//json结构见下方
    en: require("./assets/languages/en.json")
  }
});

new Vue({
  router,
  store,
  i18n,//必须添加
  render: h => h(App)
}).$mount("#app");

json文件结构：

"lang":{
    "webName": "展会系统",
    "home": "系统首页",
    "setUp": "个人设置",
    "changePassword": "修改密码",
    "Logout": "退出登录",
    "eventManagement": "展会管理",
}

3、使用

Html:

{{ $t('lang.eventManagement') }}

组件属性：属性名前加冒号":"

<BlockTitle :titleText="$t('lang.eventManagement')">

组件属性错误示例：

<BlockTitle titleText="$t('lang.eventManagement')">

没有冒号会直接输出字符。

脚本：

this.$t('lang.exhibitors')