【vue-i18n】国际化语言翻译技巧
前言现在把实在过的进行讲述下官方网站官方网站npm 地址cdn 地址安装npm安装方式:npm install vue-i18nyarn安装yarn add vue-i18nvue3 脚手架安装:vue add i18n使用第一步:引入vue-i18n依赖找到main.js入口文件,按照下面代码来import Vue from 'vue'// 1...
前言
现在把实在过的进行讲述下
官方网站
安装
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 -->
友情提示:其他的你可能在官方网站上看到,这里就不一一展示,现在已经是晚上十点多,还得学习其他的,抱歉不能一一讲解
本人大概看了下其他都很简单,自己过一边,认真对待你也能看懂文档。下面是我个人实战
实战
全局
不管支持多少种语言,请分开引入,,打包后会将其打包进入
- 这杨可以快速查找。
- 全局使用
第一步:
在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>
其他配置项自己百度吧,该下班了
更多推荐
所有评论(0)