【VUE】8、VUE项目中集成vue-i18n实现前端国际化

引言:对于一些跨国项目来说，国际化是尤为重要的，那么什么要国际化呢?国际化的意思就是将我们写的项目，能够根据不同国家的语言，进行翻译，进行切换，方便不同国家的客户使用。

1、i18n 简介

i18n 是 internationalization 这个单词的缩写，取了首字母i和结尾字母 n，中间一用有 18 个字母，所以组合起来就所写成 i18n，这是一个用于给 vue 国际化的插件，它可以轻松地将一些本地化功能集成到你的 Vue.js 应用程序中

2、安装 vue-i18n

package.json 中 dependencies 节点添加 vue-i18n

"vue-i18n": "7.3.2",

然后安装一下依赖

npm install

或

npm install --registry=https://registry.npm.taobao.org

3、创建国际化文件

src 目录下创建 lang 目录，存放国际化文件，此处包含 3 个文件，分别是 index.js，zh.js，en.js

index.js

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import elementEnLocale from 'element-ui/lib/locale/lang/en' // element-ui lang
import elementZhLocale from 'element-ui/lib/locale/lang/zh-CN'// element-ui lang
import enLocale from './en'
import zhLocale from './zh'

Vue.use(VueI18n)

const messages = {
    
    
  en: {
    
    
    ...enLocale,
    ...elementEnLocale
  },
  zh: {
    
    
    ...zhLocale,
    ...elementZhLocale
  }
}

const i18n = new VueI18n({
    
    
  // 设置语言 选项 en | zh
  locale: 'en',
  // 设置文本内容
  messages
})

export default i18n

zh.js

export default {
    
    
  login: {
    
    
    title: '后台管理系统'
  }
}

en.js

export default {
    
    
  login: {
    
    
    title: 'Management System'
  }
}

4、引入 i18n

在 src/main.js 中增量添加 i18n

import i18n from './lang'

// use添加i18n
Vue.use(Element, {
    
    
  i18n: (key, value) => i18n.t(key, value)
})

new Vue({
    
    
  i18n,
})

5、实现国际化

<template>
	<div class="login">
		<h3 class="title">{
   
   { $t('login.title') }}</h3>
	</div>
</template>

6、切换语言

提供切换按钮

<template>
  <div class="login">
    <h3 class="title">{
   
   { $t('login.title') }}</h3>
    <el-button @click="change('zh')">中文</el-button>
    <el-button @click="change('en')">English</el-button>
  </div>
</template>

提供切换方法

change(language) {
    
    
  this.$i18n.locale = language
}

7、基本用法

普通文本使用方式

{
    
    {
    
     $t('login.title') }}

标签内使用方式

:placeholder="$t('login.title')"

js内使用方式

this.$t('login.title')

如您在阅读中发现不足，欢迎留言！！！