Vue-i18n国际化组件的使用

最新推荐文章于 2024-08-15 23:22:36 发布

金ྂ执礼

最新推荐文章于 2024-08-15 23:22:36 发布

阅读量945

点赞数

文章标签： vue 前端

本文链接：https://blog.csdn.net/jin_ba_dao/article/details/119408744

版权

Vue-i18n国际化组件的使用

项目需求：中英文两种语言切换
npm install vue-i18n --save
在文件src下创建新文件夹，我取名i18n，在i18n文件下创建langs文件和i18n.js;再langs文件下创建cn.js、en.js、index.js。如图：
在i18n.js写入如下代码：

import Vue from "vue";
import locale from 'element-ui/lib/locale'
import VueI18n from "vue-i18n";
import messages from "./langs";

Vue.use(VueI18n);
const i18n = new VueI18n({
    locale: localStorage.lang || "cn",
    messages
});
locale.i18n((key, value) => i18n.t(key, value))

export default i18n;

5.在cn.js文件里写入如下代码：

import zhLocale from "element-ui/lib/locale/lang/zh-CN";
const cn = {
    switch:{
      btn:'切换到中文',
    },
    ...zhLocale
};

export default cn;

6.在en.js文件里写入如下代码：

import enLocale from 'element-ui/lib/locale/lang/en'
const en = {
    switch:{
        btn:'Switch to Chinese',
    },
    ...enLocale
};


export default en;

7.在index.js文件里写入如下代码：

import en from "./en";
import cn from "./cn";
export default {
    en,
    cn
};

8.最后在main.js中引入

import i18n from "@/i18n/i18n";
new Vue({
    i18n,
}).$mount('#app')

9.使用：
我用的是Vue框架，比如

1.
  <span>{{$t('引用en.js和cn.js里共有的对象')}}</span>
2.
  <input type="text" :placeholder="$t('引用en.js和cn.js里共有的对象')">

10.语言总体的切换
10.1
在这里插入图片描述

代码：

<div class="right">
  <div class="lang-switch" @click="switchLang(command)">{{$t('switch.btn')}}</div>
  <div class="name">{{name}}</div>
</div>

10.2
在data添加变量command:'cn',
然后：

switchLang(command){
      switch (command) {
        case "cn": {
          this.lang = "cn";
          this.$i18n.locale = this.lang;
          this.command='en'
          break;
        }
        case "en": {
          this.lang = "en";
          this.$i18n.locale = this.lang;
          this.command='cn'
          break;
        }
        default:
          break;
      }
    }