使用vue-i18n实现多语言

最新推荐文章于 2024-08-31 07:31:54 发布

muzidigbig

最新推荐文章于 2024-08-31 07:31:54 发布

阅读量2k

点赞数 1

分类专栏： vuejs 文章标签：使用i18n 安装vue-i18n 多国语言切换 iview与自定义的语言包结合 iview语言包的使用

本文链接：https://blog.csdn.net/muzidigbig/article/details/84824306

版权

vuejs 专栏收录该内容

77 篇文章 38 订阅

订阅专栏

一、前言

1.需求

Vue工程，需要实现多语言切换功能。

2.vue-i18n插件

npm中对vue-i18n的描述及文档

Internationalization plugin for Vue.js
https://www.npmjs.com/package/vue-i18n

我们将使用这个插件实现多语言。

3.兼容性

支持Vue.js 2.x以上版本

项目结构

二、实战

1.创建各国语言包资源(src/language/创建各个语言包)

zh-CN.js

export default {
    venueTemperature: "场馆温度",
    venueHumidity: "场馆湿度",
    outdoorTemperature: "室外温度",
    outdoorHumidity: "室外湿度",
    muziDigBig: '木子大大',
    childComponent: '子组件的内容'
  };

zh-Tw.js

export default {
    venueTemperature: "場館溫度",
    venueHumidity: "場館濕度",
    outdoorTemperature: "室外溫度",
    outdoorHumidity: "室外濕度",
    muziDigBig: '朩ふ汏汏'
};

en-US.js

export default {
    venueTemperature: "Venue Temperature",
    venueHumidity: "Venue Humidity",
    outdoorTemperature: "Outdoor Temperature",
    outdoorHumidity: "Outdoor Humidity",
    muziDigBig: 'Muzi Digbig',
    childComponent: 'The contents of a child component'
  };

2.安装

npm install vue-i18n --save

3.在项目入口文件中main.js中引入vue-i18n

// 引入i18n
import VueI18n from "vue-i18n"
// 这里需要注册使用语言包
Vue.use(VueI18n);
Vue.locale = () => {};

4.在项目入口文件中main.js中引入language的语言包

// 引入自定义的语言包
import cn from "@/language/zh-CN";
import tw from "@/language/zh-TW";
import us from "@/language/en-US";

// 自己写的语言包，并封装成对象
const messages = {
  zh: cn,
  tc: tw,
  en: us
};

5.创建Vue i18n实例(main.js)

// 设置参数，创建 Vuei18n 的实例。需要将他挂载全局的所有组件上
const i18n = new VueI18n({
  // set locale 本地存储记录当前选中的语言是哪一种/默认的是哪种语言
  locale: localStorage.getItem("language") || "zh", 
  messages // set locale messages,在构造器中配置这个语言包
});

6.挂载到Vue的根实例上

new Vue({
  el: '#app',
  router,
  i18n,   //这一步不能少；将这个语言包对象配置给全局组件使用
  components: { App },
  template: '<App/>'
})

7.标记在HTML中

注意：这里是$t

<div>{{$t("venueTemperature")}}</div>

8.组件中的使用

父组件App.vue

<template>
  <div id="app">
    <!-- 用{{$t(' ')}}来引入对应的值 -->
    <div>{{$t("venueTemperature")}}</div>
    <div>{{$t("venueHumidity")}}</div>
    <div>{{$t("outdoorTemperature")}}</div>
    <div>{{$t("outdoorHumidity")}}</div>
    <div>{{$t("muziDigBig")}}</div>
    <div>
      <span>切换语言</span>
      <select v-model="selLocal" placeholder="切换语言">
        <option v-for="(item,index) in changeLang" :value="item.value" :key="index">{{item.name}}</option>
      </select>
    </div>
    <child></child>
  </div>
</template>
<script>
import child from '@/components/child'
export default {
  components: { child},
  data() {
    return {
      selLocal: '',//locale所选择的存储sel语言的选择信息
      changeLang: [
        {name:'简体中文',value:'zh'},
        {name:'English',value:'en'},
        {name:'繁體中文',value:'tc'},
      ]
    }
  },
  mounted() {
    // this.$i18n.locale组件初始化就从组件中本地的localStorage中获取这个默认/语言选项
    this.selLocal = this.$i18n.locale;
  },
  watch: {
    //   切换多语言
    selLocal(newValue){
      let chan = this.changeLang;
      for (let i in chan) {
        if (chan[i].value === newValue) {
          this.selLocal = this.$i18n.locale = chan[i].value;
          localStorage.setItem("language", chan[i].value);
        }
      }
    }
  },
}
</script>

子组件child.vue

<template>
  <div class="hello">
    {{$t("childComponent")}}
  </div>
</template>
<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
    }
  }
}
</script>

效果：

默认中文

切换到英文

切换到繁体中文

三、iview的语言包+自定义语言包

前提：vue-i18和iview库已经在项目中安装好

自定义语言包资源同上

自定义的语言包与iview库提供的语言包进行合并

Object.assign(自定义, iview提供)

主要文件的代码：

main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import iView from 'iview'
import 'iview/dist/styles/iview.css'
// 引入i18n
import VueI18n from "vue-i18n"

引入iview提供的语言包
import zhLocale from "iview/src/locale/lang/zh-CN";
import enLocale from "iview/src/locale/lang/en-US";
import twLocale from "iview/src/locale/lang/zh-TW";

// 引入自定义的语言包
import cn from "@/language/zh-CN";
import tw from "@/language/zh-TW";
import us from "@/language/en-US";

Vue.config.productionTip = false

Vue.use(iView);
// 这里需要注册使用语言包
Vue.use(VueI18n);
Vue.locale = () => {};

// 自己写的语言包和iview的语言包合并;这里通过Object.assign(cn, zhLocale)进行合并
const messages = {
  zh: Object.assign(cn, zhLocale),
  en: Object.assign(us, enLocale),
  tc: Object.assign(tw, twLocale)
};

// 设置参数，创建 Vuei18n 的实例。需要将他挂载全局的所有组件上
const i18n = new VueI18n({
  // set locale 本地存储记录当前选中的语言是哪一种/默认哪种语言
  locale: localStorage.getItem("language") || "zh", 
  messages // set locale messages,在构造器中配置这个语言包
});

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>',
  i18n,   //这一步不能少；将这个语言包对象配置给全局组件使用
})

组件中使用

<template>
  <div class="hello">
    <Menu mode="horizontal">
        <MenuItem name="1">
            <Icon type="ios-paper" />
            <!-- 用{{$t(' ')}}来引入对应的值 -->
            {{$t("venueTemperature")}}
        </MenuItem>
        <MenuItem name="2">
            <Icon type="ios-people" />
            {{$t("venueHumidity")}}
        </MenuItem>
        <MenuItem name="3">
            <Icon type="ios-stats" />
            {{$t("outdoorTemperature")}}
        </MenuItem>
        <MenuItem name="4">
            <Icon type="ios-construct" />
            {{$t("outdoorHumidity")}}
        </MenuItem>
        <MenuItem name="4">
            <Icon type="ios-construct" />
            {{$t("muziDigBig")}}
        </MenuItem>
        <Select v-model="locale" @on-change="changeLangFn" style="width:100px" placeholder="切换语言">
          <Option v-for="(item,index) in changeLang" :value="item.value" :key="index">{{item.label}}</Option>
        </Select>
    </Menu>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      locale: '',//locale存储sel语言的选择信息
      changeLang: [
        {value: "zh",label: "简体中文"},
        {value: "en",label: "English"},
        {value: "tc",label: "繁體中文"}
      ]
    }
  },
  mounted() {
    // this.$i18n.locale 要传key；this.$i18n.locale组件初始化就从组件中本地的localStorage中获取这个语言选项
    this.locale = this.$i18n.locale;
    this.changeLangFn(this.locale);
  },
  methods: {
    //   切换多语言
    changeLangFn(val) {
      let chan = this.changeLang;
      for (let i in chan) {
        if (chan[i].value === val) {
          this.locale = this.$i18n.locale = chan[i].value;
          localStorage.setItem("language", chan[i].value);
        }
      }
    }
  }
}
</script>
<style scoped>
.hello{
  background-color: pink;
}
</style>

效果：

默认