i18n国际化切换语言

vue中i18n切换语言的使用

在项目中要用到点击切换语言的功能。切换语言使用的是i18n.我是结合vant使用的。对我自己知识点进行总结归纳。

先进行下载

npm install --save vue-i18n 
//使用这个安装i18n,但是安装的是最新版本的.我使用的是vue2,一直因为版本问题安装不上去.改变一下版本号就行
npm install --save vue-i18n@8.27.1
//这是安装指定版本

创建语言包

其中cn.js和en.js是我们要用到的语言包

//cn.js是中文.如果需要的多话,可以进行细分
export default{
  route:{
    main:'首页',
    change:"切换语言"
  },
  table:{}
}


//en.js是英文
export default{
  route:{
    main:'mainpage',
    change:"changelangue"
  },
  table:{}
}

index.js是汇总

import Vue from 'vue'
import VueI18n from 'vue-i18n'
// import { Locale } from 'vant'
// 
import enUS from 'vant/es/locale/lang/en-US'
import zhCN from 'vant/es/locale/lang/zh-CN'
Vue.use(VueI18n)
// 导入自己写的
import en from './en'
import cn from './cn'
// 合并
const messages = {
  en:{
  //使用展开运算符。
    ...en,
    ...enUS
  },
  zhCHS:{
    ...cn,
    ...zhCN
  }
}
const i18n = new VueI18n({
  locale:"en",//设置默认字体
  messages
})
export default i18n

在main.js中引入

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import VueI18n from 'vue-i18n'
import i18n from './utils/lang'

Vue.config.productionTip = false

new Vue({
  router,
  VueI18n,
  i18n,
  render: h => h(App)
}).$mount('#app')

最后在页面上实践

在一般标签里面使用

<template>
  <div id="app">
   <div class="changelang">
          <span @click="change">{{ this.$i18n.locale === 'en' ? 'English' : "中文" }}</span>
        </div>
  </div>
</template>
<script>
export default{
  methods:{
    change(){

      if( this.$i18n.locale === 'en'){
        this.$i18n.locale = 'zhCHS'
      }else{
        this.$i18n.locale = 'en'
      }
    }
  }
}
</script>

<style lang="less">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

在行内标签里面使用
比如 input等的提示词

  <input type="text" :placeholder="$t('输入内容的地址')">