vue和uniapp国际化以及任意地方设置语言类型

系列文章目录

最近要在项目里面使用国际化，一来就来三个语言（中文，英语，印尼），赶紧百度一番，下面是项目里面完整使用

---

提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档

---

依赖安装

npm install vue-i18n --save-dev

或者复制下面代码

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、新建配置文件（static目录下面新建lang文件 如下）

lang 目录示例

• . vue-i18n.js 是直接复制的vue-i18n代码，这里使用npm 下载是一样的没有任何影响
• en_US.js 为英语语言配置
• id_ID.js 为印尼语言配置
• zh_CN.js 为中文配置
• index.js 为国际的一些配置

二、配置多语言

zh_CN en_US id_ID 三个文件 其实是相同的配置只是语言不一样

分别在 zh_CN en_US id_ID 文件种写入相同的对象，但是值不一样 其实类似与JSON的配置语言

zh_CN.js

export default {
    index: {
        Loading: '加载中',
		loginOk: '登录成功',
		operate: '操作成功',
		errMsg: '获取数据出错',
		errOperate: '操作失败',
    },
}

en_US.js

export default {
    index: {
        Loading: 'Loading',
		loginOk: 'Login successful',
		operate: 'Operation successful',
		errMsg: 'Error getting data',
		errOperate: 'operation failed',
    },
}

id_ID.js

export default {
    index: {
    Loading: 'Memuat',
    loginOk: 'Login berhasil',
    operate: 'Operasi Berhasil',
    errMsg: 'Kesalahan mendapatkan data',
    errOperate: 'operasi gagal',
    },
}

1 多语言的配置 index.js里面

1. 导入 zh_CN.js
2. 导入en_US.js
3. 导入 id_ID.js
4. 导入 vue-i18n
5. 导入 vue

import en  from './en_US.js'
import cn from './zh_CN.js'
import idn from './id_ID.js'
import Vue from 'vue'
import {setStorage,getStorage} from '../../utlis/uni.public.js'  // 自定义函数
import VueI18n from 'vue-i18n'

获取系统语言

unipp

uni.getSystemInfo({
		success: function(res) {
			
		}
	})

js 获取系统语言

navigator.language

设置系统语言

1. 获取系统语言
2. 设置系统语言，没有就设置默认中文

let cur_lang = 'cn';
// system_info 为uniapp的系统对象 里面的 language为系统语言
// vue 中使用 navigator.language 即可
switch (system_info.language) {
	case 'en':
		cur_lang = 'en'
		break;
	case 'cn':
		cur_lang = 'cn'
		break;
	case 'idn':
		cur_lang = 'idn'
		break;

}

const i18n = new VueI18n({
	locale: cur_lang || 'cn', // 默认选择的语言
	// 这里到 导入我们自己的语言类型，分别对应的Key
	messages: {
		'en': en,
		'cn': cn,
		'idn': idn
	}
})

整个index.js 代码

import en  from './en_US.js'
import cn from './zh_CN.js'
import idn from './id_ID.js'
import Vue from 'vue'
import {setStorage,getStorage} from '../../utlis/uni.public.js'
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
const system_info = getStorage('system_info')
if (!system_info) {
	// 获取设备信息
	uni.getSystemInfo({
		success: function(res) {
			setStorage('system_info', res);
		}
	})
}

let cur_lang = 'cn';
switch (system_info.language) {
	case 'en':
		cur_lang = 'en'
		break;
	case 'cn':
		cur_lang = 'cn'
		break;
	case 'idn':
		cur_lang = 'idn'
		break;
}
const i18n = new VueI18n({
	locale: cur_lang || 'cn',
	messages: {
		'en': en,
		'cn': cn,
		'idn': idn
	}
})

export default i18n

在mian.js 导入，并且挂载到 vue 的原型上面

import i18n from './static/lang/index'  // 注意路径
Vue.prototype._i18n = i18n

为什么要挂载到原型？
因为页面一修改语言类型就会使用自动触发 i18n 去修改值

页面使用的四种方式

一在 computed 计算属性使用

computed: {
			i18n() {
				return this.$t('index')
			},
		},

页面使用

因为计算属性在里面返回的我我们这个页面需要的多语言数据，所以我们可以直接使用

<view class="text-area">
			<text class="title">{{i18n.title}}</text>
</view>

二页面直接使用 $t() 方法

<view class="text-area">
			<text class="title">{{$t('index').title}}</text>
</view>

在data 中定义

export default {
  data() {
    return {
      index: this.$t('index'),
      }
     }
   }

 <view>{{ index.title}}</view>

注意 ： 比如第一次登录了，第二次进来不需要登录，那么第二次返回登录页面多语言不生效

---

四在其他js文件使用多语言

比如我们要在公共封装的请求js 文件使用多语言

引入我们自己配置的多语言的index.js

import i18ns from '../static/lang/index'  // 注意自己路径

//使用
i18ns.t('index').title

注意：如果按照main.js 那样应用过来使用 $t(xx).xx是没有效果的，也不能在其他js文件中使用this.$t(xx).xx 来获取，因为在其他文件中的this 不是vue的，但是，不要在引用一次vue 再来用this.$(xxx).xx 是无效的

任意地方设置语言类型

因为我们在 main.js 把il8n挂载到原型的，所以我们在vue 任意地方都可使用

this._i18n.locale = xxx