vue-i18n 国际化语言切换

  vue-i18n 用于前端vue项目中,需要多语言切换的场景

  

 安装方法(npm)

npm install vue-i18n

  

 简单使用

   1、在vue项目的main.ts文件中实例化 i18n

import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
 const i18n = new VueI18n({     locale: 'zh', // 语言标识     messages: {        en: {            test: {              apple: 'apple',           },        },        zh: {           test: {              apple: '苹果',           },        },     },  })
 

  

  2、把 i18n 挂载到 vue 根实例上

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

 

  3、在 HTML 模板中使用(简单示例)

 这里通过修改 i18n的 locale 的属性值来切换语言

<template>
  <div>
    {{ $t('test.apple') }}
    <div>
      <button @click="switchLang">切换英文</button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'demo',
  methods: {
    switchLang() {
      this.$i18n.locale = 'en'
    },
  },
}
</script>

<style></style>

 

  4、效果如下

vue-i18n 国际化语言切换

 

 

  在实际项目中,往往是需要大段的翻译内容,这时候,我们需要将翻译文本分类,分文件以便于管理

  具体结构可参考下图

                            vue-i18n 国际化语言切换

  

  其中i18n.js是将i18n实例化的代码

import Vue from 'vue' import VueI18n from 'vue-i18n'
import zh from './zh/index.js' import en from './en/index.js'
Vue.use(VueI18n) let locale = 'zh' export default function(obj = {}) {   return new VueI18n({     locale, // 设置地区     messages: { en, zh, ...obj }, // 设置地区信息   }) }

 

  在main.js中挂载到vue实例上

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

import createI18n from '@/assets/language/i18n.js'

const i18n = createI18n()

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

  

  en和zh文件夹中的index.js其实都一样,用webpack的api —— require.context 实现自动化导入模块

const languagesModule = require.context('./languageModule', true, /\.js$/)
const languages = languagesModule.keys().reduce((modules, modulePath) => {
  const name = modulePath.replace(/^\.\/(.*)\.js+$/, '$1')
  const value = languagesModule(modulePath)
  modules[name] = value.default
  return modules
}, {})
export default { ...languages }

  

  en和zh文件夹中的 languageModule 文件夹下的文件,都是以下的格式

export default {   an_apple_a_day: '一天一个苹果,医生远离我', }

  

  HTML模板中的使用情况及效果展示

<template>
  <div>
    {{ $t('test2.an_apple_a_day') }}
    <div>
      <button @click="switchLang">切换英文</button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'demo',
  methods: {
    switchLang() {
      this.$i18n.locale = 'en'
    },
  },
}
</script>

vue-i18n 国际化语言切换

  

 

 vue-i18n变量赋值

  有时我们的不同翻译文本中有很多相同的语句,这时候我们可以把相同的提取出来,不同的用变量处理 或者 有时候我们的翻译中需要加入后端返回的数据,这时候也可以用到变量,

 

  变量用法

  用法很简单,这里只具体举一个例子展示

  

export default {  // 这里切记括号里变量左右不能有空格!!!
  wait_and_try_again: '请等待{seconds}秒后再试', 
}

  模板:

<p>{{ $t('test.wait_and_try_again', { seconds: 6 }) }}<p>

  效果:

  

vue-i18n 国际化语言切换

 

上一篇:Vue使用vue-i18n实现国际化


下一篇:react项目实现国际化i18n