vue-i18n

在vue项目中使用vue-i18n 实现国际化

在很多项目的开发中都需要设置国际化

我也是在最近的一个项目中使用到了国际化，所以总结一下

1. 安装vue-i18n

1	yarn add vue-i18n

2. 在根目录中创建lang文件夹

en_us.js

export default {
  footer: ["home", "catgory", "cart", "account", "not login"],
  header: {},
  index: {
    rowTime: {
      title: "xxx",
    },
    recommend: "xxx",
  },
  userPageText: {
    WishList: "xxxx",
    listText: {
      MyOrders: "xxx",
     ...
    },
    LogOut: "Log Out",
  },
  login: {
    btns: {
      fackbook: "xxx",
     ...
    },
    placeholder: {
      phone: "xxx",
     ...
    },
  },
};

zh_cn.js

export default {
  footer: ["首页", "分类", "购物车", "个人中心", "未登录"],
  header: {},
  index: {
    rowTime: {
      title: "xxx",
    },
    recommend: "xxx",
  },
  userPageText: {
    Coupons: "xxx",
    listText: {
      MyOrders: "xxx",
     ...
    },
    LogOut: "退出",
  },
  login: {
    btns: {
      fackbook: "xxx ",
     ...
    },
    placeholder: {
      phone: "xxx",
      ...
    },
  },
};

index.js

import Vue from "vue";
import VueI18n from "vue-i18n";
import { Locale } from "vant";
import enUS from "vant/lib/locale/lang/en-US";
import zhCN from "vant/lib/locale/lang/zh-CN";
import enLocale from "./en_us";
import zhLocale from "./zh_cn";

Vue.use(VueI18n);

const messages = {
  en: {
    ...enUS,
    ...enLocale
  },
  zh: {
    ...zhCN,
    ...zhLocale
  }
};

const i18n = new VueI18n({
  locale: "zh", // 设置默认语言
  messages: messages, // 设置资源文件对象
});

// 更新vant组件库本身的语言变化，支持国际化
function vantLocales(lang) {
  if (lang === "en") {
    Locale.use(lang, enUS);
  } else if (lang === "zh") {
    Locale.use(lang, zhCN);
  }
}

export { i18n, vantLocales };

main.js

import { i18n, vantLocales } from "./lang";
vantLocales(i18n.locale);
new Vue({
  router,
  i18n,
  store,
  render: (h) => h(App),
}).$mount("#app");

3. 使用

在需要使用到国际化的组件内直接使用

<van-cell
:title="$i18n.messages[this.$i18n.locale].userPageText.listText.MyOrders"
class="iconfont icon-record"
size="large"
@click="$router.push({ name: 'orderlist' })"
/>

为了方便先引入在使用

1
2
3

created() {
this.i18nMsg = this.$i18n.messages[this.$i18n.locale].userPageText;
},

<van-cell
:title="i18nMsg.listText.MyOrders"
class="iconfont icon-record"
size="large"
@click="$router.push({ name: 'orderlist' })"
/>

4. 按钮控制切换语言

this.$i18n.locale,当你赋值为‘zh’时，导航栏就变成中文；当赋值为 ‘en’时，就变成英文

1	<div class="top_btn" @click="changeLangEvent">中文</div>

changeLangEvent() {
console.log('changeLangEvent');
this.$confirm('确定切换语言吗?', '提示', {
  confirmButtonText: '确定',
  cancelButtonText: '取消',
  type: 'warning'
}).then(() => {
  if ( this.$i18n.locale === 'zh' ) {
    this.$i18n.locale = 'en';//关键语句
    console.log('en')
  }else {
    this.$i18n.locale = 'zh';//关键语句
    console.log('zh')
  }
}).catch(() => {
  console.log('catch');
  this.$message({
    type: 'info',
  });
});
}