标签：vue zh js en ui i18n import element

背景

有的时候我们做的项目需要支持切换多国语言，那么我们就需要使用到vue-i18n插件

使用步骤

注意：下面操作是基于vue2的版本

实现功能：

• 在vue单文件组件中如何使用
  • 模版中使用{{ $t('xxx') }}
• 点击"切换语言"
  • 修改挂载在vue实例的$i18n的locale

1. 安装依赖

npm i vue-i18n@6

2. 在src文件夹下创建language文件夹

index.js

import Vue from 'vue'
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)

// 引入各个语言配置文件
import zh from './zh'
import en from './en'

// 创建i18n实例
const i18n = new VueI18n({
  // 设置默认语言
  locale: 'zh', // 语言标识
  // 添加多语言（每一个语言标示对应一个语言文件）
  messages: {
    zh,
    en,
  },
})

export default i18n

zh.js

注意：在对zh.js文件新增字段后需要同步在en.js中同样新增字段

/** 修改zh.js文件后，应将修改或新增的自动同步到en.js
* zh.js 和 en.js 字段数量应一致，如不熟悉字段使用范围，应尽量新增字段，避免修改现有字段
*/ 
const zh = {
  title: '测试',
}

export default zh

en.js

const en = {
  title: 'test',
}

export default en

main.js

import i18n from './language'
new Vue({
  i18n,
  render: (h) => h(App),
}).$mount('#app')

App.vue

<button @click="toggleLanguage('zh')">切换成 中文</button>
<button @click="toggleLanguage('en')">切换成 English</button>
<hr />
<h1>title:{{ $t('title') }}</h1>

export default {
  data: function () {
    return {}
  },
  methods: {
    toggleLanguage(lang) {
      this.$i18n.locale = lang
      console.log(this.$i18n)
    },
  },
}

小结

• 模版中的使用
  • {{ $t('xxx') }}
• vue文件以外的地方，比如js使用
  • import i18n from '@/lang'
  • const loginTitle = i18n.t('login.title')

其他功能

element-ui中使用国际化

在创建i18n实例的语言中追加element-ui的语言包。

即只需要修改上面的language/index/js

import Vue from 'vue'
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)

// 引入各个语言配置文件
import zh from './zh'
import en from './en'

// 引入element的语言包
import locale from 'element-ui/lib/locale'
import enLocale from 'element-ui/lib/locale/lang/en'
import cnLocale from 'element-ui/lib/locale/lang/zh-CN'

// 创建i18n实例
const i18n = new VueI18n({
  // 设置默认语言
  locale: 'zh', // 语言标识
  // 添加多语言（每一个语言标示对应一个语言文件）
  messages: {
    zh: {
      ...cnLocale,
      ...zh,
    },
    en: {
      ...enLocale,
      ...en,
    },
  },
})

locale.i18n((key, value) => i18n.t(key, value))
export default i18n

js文件中使用国际化

示例：在下面示例中是前后端分离项目常用到的对axios的封装，当请求令牌失效时对系统进行提示。但是如果我们想要进行国际化，常规的引用Vue是不可行的。

1. 将vue实例挂载到window对象上

window.vm = new Vue({
  el: '#app',
  i18n,
  router,
  store,
  template: '<App/>',
  components: { App }
})

2. 路由或者事件触发时使用国际化函数

if (res.code === 'C1000002') {
    //使用window.vm.$t() 即可达到国际化效果
        MessageBox.confirm(window.vm.$t('authentication.failed.message'), window.vm.$t('authentication.failed.confirmLogout'), {
          confirmButtonText: window.vm.$t('authentication.failed.reLogin'),
          cancelButtonText: window.vm.$t('authentication.failed.cancel'),
          type: 'warning'
        })
      }

js配置文件中使用国际化 【推荐方案】

上面js文件中使用国际化，如果在组件的created生命周期时调用window.vm会是一个undefined，也就是只有在事件触发后才可以使用，但是有的时候我们的js就是一个单独的配置文件，是要给其他js或者vue做导入的。比如：表单的配置项单独封装到formConfig.js中，然后这个文件里很多需要配置国际化的东西。

思路：

• 配置文件中需要设置国际化的内容，使用i18n去做转换
• 切换语言的时候在用户本地存储设置的语言类型，然后刷新页面
• 在国际化导出的i18n对象中设置默认的语言，从本地存储中读取

formConfig.js

import i18n from '@/language'
const formConfig = {
  formItems: [
    {
      prop: 'id',
      placeholder: i18n.t('contentTips.uploadFirst'),
    },
    {
      prop: 'name',
      placeholder: '请输入name',
    },
  ],
}
export default formConfig

App.vue

<button @click="toggleLanguage('zh')">切换成 中文</button>
<button @click="toggleLanguage('en')">切换成 English</button>

toggleLanguage(lang) {
    this.$i18n.locale = lang
    window.localStorage.setItem('lang', lang)
    window.location.reload()
},

language/index.js

// 创建i18n实例
const i18n = new VueI18n({
  // 设置默认语言
  locale: window.localStorage.getItem('lang') || 'zh', // 语言标识
	...
}

效果图：

注意

1. zh.js和en.js字段同步设置问题

• 修改zh.js文件后，应将修改或新增的自动同步到en.js；

• zh.js 和 en.js 字段数量应一致，如不熟悉字段使用范围，应尽量新增字段，避免修改现有字段

2. zh.js和en.js中按功能进行划分

因为页面出现的字体会有很多，如果不按功能划分的话，后期不好维护

参考文章

https://juejin.cn/post/6922708116165361671

https://blog.csdn.net/beichengliulixue/article/details/118965496

标签：vue,zh,js,en,ui,i18n,import,element
From： https://www.cnblogs.com/it774274680/p/16842444.html