【vue-i18n】国际化语言翻译技巧

前言

现在把实在过的进行讲述下

官方网站

• 官方网站
• npm 地址
• cdn 地址

安装

npm安装方式：

npm install vue-i18n

yarn安装

yarn add vue-i18n

vue3 脚手架安装：

vue add i18n

使用

第一步：引入vue-i18n依赖

找到main.js入口文件，按照下面代码来

import Vue from 'vue'
// 1、引入 vue-i18n
import VueI18n from 'vue-i18n'
// 2、安装到vue中
Vue.use(VueI18n)
// 3、实例化一个
const i18n = new VueI18n({
  locale: 'en', // 设置语言环境
  messages: {
    en: { hello: 'hi there!' },
    ja: { hello: 'こんにちは！' }
  }
})

new Vue({
  el: '#app',
  router,
  store,
  i18n, // 4、挂载到vue实例上，为了可以切换好弄。
  components: { App },
  template: '<App/>'
})

第二步：渲染页面

渲染到页面中，看看是否渲染成功

<template>
 	<div>
		{{$t('hello')}}
		<button @click="btn">切换翻译</button>
	</div>
</template>

<script>
export default {
  name: '',
  created(){
    
  },
  methods: {
    btn() {
    	this._i18n.locale = this._i18n.locale =='en' ? 'ja': 'en';
    }
  }
}
</script>

<style lang="less"></style>

开始

此处接上面的?栗子进行往下面来，下面内容省略了不必要的代码。这里会将一些可以使用的方式展示出来

方式一： v-html或者v-text 进行输出

不推荐使用 v-html 。应为：只要你们放了javascript标签字符串，就会运行代码，那么随便攻击咯，所以最好不要用v-html

可以通过 v-html或者v-text 进行输出：

<!-- 此处会打印出来 -->
<div v-html="$t('hello')"></div>
<hr>
<div v-text="$t('hello')"></div>

方式二：拼接字符串（对象方式）

进行拼接字符串，官方叫做 “具名格式”。如果翻译文字与其他文字进行拼接在一块的话，可以使用这个

<!-- 一般情况下我们都这莫干进行拼接，可以看出下面是前面是不变的，后面拼接是可变的，如果更为复杂拼接了是不是很累，官方给出来一种方案 -->
<div>{{$t('hello') + '世界' + $t('hello') + '--老程'}}</div>

下面是官方给的一种跟传参一样爽的方案。

1、先将翻译文本地方使用{}，找到拼接位置通过变量占位子

在main.js中进行修改需要拼接位置，然后通过变量占位下，如下代码：

const i18n = new VueI18n({
  locale: 'en', // 设置语言环境
  messages: {
    en: { 
      // 1、在语言设置上面，进行关键位置用变量占位子，每个语言也得弄上哦,比如change
      hello: 'hi there! {change}' 
    },
    ja: { 
      hello: 'こんにちは！ {change}'
    }
  }
})

2、在页面中，变量值为你需要变的值

<!-- 2.给个参数，如果有多个参数，可以往里面写 -->
<div>{{$t('hello', {change:'11111111111'})}}</div>
<!-- 打印值：hi there!11111111111 -->

方式三：拼接字符串（数组方式）

1、和上面一样，先从翻译里面进行占位子

在 main.js 中，将数组索引下标作为占位的地方，

const i18n = new VueI18n({
  locale: 'en', // 设置语言环境
  messages: {
    en: { 
      // 1、在语言设置上面，进行关键位置用索引下标占位子，每个语言也得弄上哦,比如
      hello: 'hi there! {0}' 
    },
    ja: { 
      hello: 'こんにちは！ {0}'
    }
  }
})

2、页面中展示

<!-- 2.在第二个参数上，进行给个数组 -->
<div>{{$t('hello',['6666666'])}}</div>
<!-- 3.根据上面说对象也是通过 {0} 这杨吧，那么下面可以使用对象写法 -->
<div>{{$t('hello',{'0':'6666666'})}}</div>
<!-- 两个都是打印输出：hi there! 6666666 -->

友情提示：其他的你可能在官方网站上看到，这里就不一一展示，现在已经是晚上十点多，还得学习其他的，抱歉不能一一讲解

本人大概看了下其他都很简单，自己过一边，认真对待你也能看懂文档。下面是我个人实战

实战

全局

不管支持多少种语言，请分开引入，，打包后会将其打包进入

1. 这杨可以快速查找。
2. 全局使用

第一步：

在main.js中，将每个翻译的脚本引入进来

const i18n = new VueI18n({
    locale: 'english',// 默认选中的
    messages: {
      'chinese': require('./assets/lang/zh'),   // 中文语言包
      'english': require('./assets/lang/en'),    // 英文语言包
      'arabic':require('./assets/lang/ar'), // 阿拉伯语
    }
})

第二步：下面是翻译好的格式，请按这个来，变量名统一好

// 中文翻译
export const m = {
	"tab_home_text": "首页",
}

// 英文翻译
export const m = {
	"tab_home_text": "Home",
}

// 阿拉伯翻译
export const m = {
	"tab_home_text": "الصفحة الرئيسية",
}

第三步：页面中使用

<div>{{$t('m.tab_home_text')}} </div>
<!-- 或者 -->
<div v-t="'m.tab_home_text'"></div>

局部

场景在于活动页面等。不常用网页或者就访问一个页面，如：嵌入安卓或ios应用内活动页面，只进入翻译只要部分即可，那么就可以使用到这个。说白了，就是当你访问当前url的时候，设置当前页面翻译，官方手册未说明白，但是例子中有。

<template>
    <div >
    	<div>
			{{$t('activity.k')}}
		</div>
    </div>
</template>

<script>
    export default {
    	name:'activity',
        data(){
            return {
            }
        },
        created(){
        	this.$nextTick(()=>{
				this.$i18n.mergeLocaleMessage("en",{
					activity:{k:'英文翻译'}
				})
				this.$i18n.mergeLocaleMessage("ja",{
					activity:{k:'日本翻译' }}
				})
            }
			}
        	
        },
        methods:{
        }
    }
</script>

<style lang="less" scoped>
</style>

其他配置项自己百度吧，该下班了