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

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

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

1. 安装vue-i18n

1
yarn add vue-i18n

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

en_us.js

1
export default {
2
  footer: ["home", "catgory", "cart", "account", "not login"],
3
  header: {},
4
  index: {
5
    rowTime: {
6
      title: "xxx",
7
    },
8
    recommend: "xxx",
9
  },
10
  userPageText: {
11
    WishList: "xxxx",
12
    listText: {
13
      MyOrders: "xxx",
14
     ...
15
    },
16
    LogOut: "Log Out",
17
  },
18
  login: {
19
    btns: {
20
      fackbook: "xxx",
21
     ...
22
    },
23
    placeholder: {
24
      phone: "xxx",
25
     ...
26
    },
27
  },
28
};

zh_cn.js

1
export default {
2
  footer: ["首页", "分类", "购物车", "个人中心", "未登录"],
3
  header: {},
4
  index: {
5
    rowTime: {
6
      title: "xxx",
7
    },
8
    recommend: "xxx",
9
  },
10
  userPageText: {
11
    Coupons: "xxx",
12
    listText: {
13
      MyOrders: "xxx",
14
     ...
15
    },
16
    LogOut: "退出",
17
  },
18
  login: {
19
    btns: {
20
      fackbook: "xxx ",
21
     ...
22
    },
23
    placeholder: {
24
      phone: "xxx",
25
      ...
26
    },
27
  },
28
};

index.js

1
import Vue from "vue";
2
import VueI18n from "vue-i18n";
3
import { Locale } from "vant";
4
import enUS from "vant/lib/locale/lang/en-US";
5
import zhCN from "vant/lib/locale/lang/zh-CN";
6
import enLocale from "./en_us";
7
import zhLocale from "./zh_cn";
8
9
Vue.use(VueI18n);
10
11
const messages = {
12
  en: {
13
    ...enUS,
14
    ...enLocale
15
  },
16
  zh: {
17
    ...zhCN,
18
    ...zhLocale
19
  }
20
};
21
22
const i18n = new VueI18n({
23
  locale: "zh", // 设置默认语言
24
  messages: messages, // 设置资源文件对象
25
});
26
27
// 更新vant组件库本身的语言变化，支持国际化
28
function vantLocales(lang) {
29
  if (lang === "en") {
30
    Locale.use(lang, enUS);
31
  } else if (lang === "zh") {
32
    Locale.use(lang, zhCN);
33
  }
34
}
35
36
export { i18n, vantLocales };

main.js

1
import { i18n, vantLocales } from "./lang";
2
vantLocales(i18n.locale);
3
new Vue({
4
  router,
5
  i18n,
6
  store,
7
  render: (h) => h(App),
8
}).$mount("#app");

3. 使用

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

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

为了方便 先引入 在使用

1
created() {
2
this.i18nMsg = this.$i18n.messages[this.$i18n.locale].userPageText;
3
},
1
<van-cell
2
:title="i18nMsg.listText.MyOrders"
3
class="iconfont icon-record"
4
size="large"
5
@click="$router.push({ name: 'orderlist' })"
6
/>

4. 按钮控制切换语言

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

1
<div class="top_btn" @click="changeLangEvent">中文</div>
1
changeLangEvent() {
2
console.log('changeLangEvent');
3
this.$confirm('确定切换语言吗?', '提示', {
4
  confirmButtonText: '确定',
5
  cancelButtonText: '取消',
6
  type: 'warning'
7
}).then(() => {
8
  if ( this.$i18n.locale === 'zh' ) {
9
    this.$i18n.locale = 'en';//关键语句
10
    console.log('en')
11
  }else {
12
    this.$i18n.locale = 'zh';//关键语句
13
    console.log('zh')
14
  }
15
}).catch(() => {
16
  console.log('catch');
17
  this.$message({
18
    type: 'info',
19
  });
20
});
21
}

这只是一个案例，可以用一个变量存储要改变 的语言，点击按钮的时候，访问设置属性，从而设置不同的语言

注意：部分文章可能会在不就的将来更新

如果能够帮助到你，是小编最大的荣幸

当然 有 不好的地方 请大家帮忙指出 学习永无止境

小编一直认为 人外有人 天外有天 一起学习 共同进步

让我们共同加油吧！！！