uniapp vue2版本如何设置i18n

如何设置i18n在该软件设置过语言的情况下优先选择所设置语言，在没有设置的情况下，获取本系统默认语言就，将系统默认语言设置为当前选择语言。

1、下载依赖：

npm install vue-i18n --save

2、创建相关文件（在最外层，与main.js平级）

3、en文件下：

{
	"pageJson.switchLanguage": "Switch Language",
	"checkLanguage.chinese": "Chinese",
	"checkLanguage.russian": "Russian",
	"checkLanguage.english": "English",
	"checkLanguage.auto": "Automatic",
	"checkLanguage.applicationLanguage": "Current language:",
	"checkLanguage.language": "Switch Language:",
	"checkLanguage.restartApp": "Applying this setting will restart the app"
}

4、zh_CN文件：

{
	"pageJson.switchLanguage": "切换语言",
	"checkLanguage.chinese": "中文",
	"checkLanguage.russian": "俄语",
	"checkLanguage.english": "英文",
	"checkLanguage.auto": "自动",
	"checkLanguage.applicationLanguage": "当前语言:",
	"checkLanguage.language": "语言",
	"checkLanguage.restartApp": "应用此设置将重启App"
}

5、index文件：

import en from './en.json'
import zh_CN from './zh_CN.json'

export default {
	en,
	'zh_CN': zh_CN
}

6、main.js文件：（locale取值逻辑为：优先获取locastorage中的值，如果locastorage中不存在，获取当前系统的值并赋值）

import Vue from 'vue'
import App from './App'

import uView from "uview-ui";
Vue.use(uView);

import messages from './local/index.js'
let i18nConfig = {
	// locale: uni.getLocale(),
	locale: uni.getStorageSync('locale') != null && uni.getStorageSync('locale') != undefined && uni.getStorageSync(
		'locale') != '' ? (uni.getStorageSync(
		'locale').startsWith('zh') ? 'zh_CN' : 'en') : (uni.getLocale().startsWith('zh') ? 'zh_CN' : 'en'),
	messages
}
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
const i18n = new VueI18n(i18nConfig)


Vue.config.productionTip = false

App.mpType = 'app'

const app = new Vue({
	i18n,
	...App
})
app.$mount()

7、将时区和uniapp当前所选择的值放入请求头中（cookie字段uniapp请求头回自动屏蔽，所以设置为其他字段传给后端）

时区获取使用moment-timezone，三方插件（具体使用请查看我的另外一篇文章：https://blog.csdn.net/xiao_qiang666/article/details/144984641?spm=1001.2014.3001.5502）

import moment from 'moment-timezone';

const timeZone = moment.tz.guess();
let localLanguage = uni.getStorageSync('locale');
let cookieObj = null
if (localLanguage && localLanguage == 'zh_CN') {
	cookieObj = 'za-language=zh-CN; timeZone=' + timeZone
} else if (localLanguage && localLanguage == 'en') {
	cookieObj = 'za-language=en_US; timeZone=' + timeZone
} else {
	let systemInfo = uni.getSystemInfoSync();
	let systemLocale = systemInfo.language;
	if (systemLocale && systemLocale == 'zh-CN') {
		cookieObj = 'za-language=zh_CN; timeZone=' + timeZone
	} else {
		cookieObj = 'za-language=en_US; timeZone=' + timeZone
	}

}

//以其中一个为例
let _get = function(url, obj, callback) {
	return ajax({
		method: 'GET',
		header: {
			'content-type': 'multipart/form-data; boundary=XXX',
			'cache-control': 'no-cache',
			'xcookie': cookieObj,
			'Authorization': 'Bearer ' + uni.getStorageSync('token'),
		},
		url: url,
		data: utils.formatForm(obj),
		success: function(res) {
			// let pages = getCurrentPages();
			if (res.code === 200) {
				callback && callback(res);
			}

		}
	})
}

8、语言切换页面：
 

<template>
	<view class="container">
		<view class="card_container">
			<view class="list-item">
				<text class="k">{{$t(`checkLanguage.applicationLanguage`)}}</text>
				<text class="v">{{applicationLocale.startsWith('zh')?'中文':'English' }}</text>
			</view>
			<view class="locale-setting">{{$t(`checkLanguage.language`)}}</view>
			<view class="locale-list">
				<view class="locale-item" v-for="(item, index) in locales" :key="index" @click="onLocaleChange(item)">
					<text class="text">{{item.text}}</text>
					<text class="icon-check" v-if="item.code == applicationLocale"></text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				systemLocale: '',
				applicationLocale: '',
				curChange: null
			}
		},
		computed: {
			locales() {
				return [{
						text: this.$t('checkLanguage.auto'), //自动
						code: 'auto'
					}, {
						text: "English",
						code: 'en'
					},
					{
						text: "中文",
						code: 'zh_CN'
					}
				]
			}
		},
		onLoad() {
			let systemInfo = uni.getSystemInfoSync();
			this.systemLocale = systemInfo.language;
			this.applicationLocale = uni.getLocale();
			this.isAndroid = systemInfo.platform.toLowerCase() === 'android';
			uni.onLocaleChange((e) => {
				this.applicationLocale = e.locale;
			})
		},
		methods: {
			onLocaleChange(e) {
				if (this.isAndroid) {
					uni.showModal({
						content: this.$t(`checkLanguage.restartApp`),
						success: (res) => {
							if (res.confirm) {
								uni.setLocale(e.code);
								uni.setStorageSync('locale', e.code);
								this.$i18n.locale = e.code;

							}
						}
					})
				} else {
					uni.setLocale(e.code);
					this.$i18n.locale = e.code;
				}
			}
		}
	}
</script>

<style>
	.container {
		height: 100vh;
		padding: 20% 10%;
		display: flex;
		justify-content: center;
	}

	.card_container {
		height: 500upx;
		width: 100%;

		background-color: #FFF;
		padding: 8%;
		border-radius: 24upx;
	}

	.title {
		font-size: 16px;
		font-weight: bold;
		margin-bottom: 15px;
	}

	.description {
		font-size: 14px;
		opacity: 0.6;
		margin-bottom: 15px;
	}

	.detail-link {
		font-size: 14px;
		word-break: break-all;
	}

	.link {
		color: #007AFF;
		margin-left: 10px;
	}

	.locale-setting {
		font-size: 16px;
		font-weight: bold;
		margin-top: 25px;
		margin-bottom: 5px;
		padding-bottom: 5px;
		border-bottom: 1px solid #f0f0f0;
	}

	.list-item {
		font-size: 14px;
		padding: 10px 0;
	}

	.list-item .v {
		margin-left: 5px;
	}

	.locale-item {
		display: flex;
		flex-direction: row;
		padding: 10px 0;
	}

	.locale-item .text {
		flex: 1;
	}

	.icon-check {
		margin-right: 5px;
		border: 2px solid #007aff;
		border-left: 0;
		border-top: 0;
		height: 12px;
		width: 6px;
		transform-origin: center;
		/* #ifndef APP-NVUE */
		transition: all 0.3s;
		/* #endif */
		transform: rotate(45deg);
	}
</style>

9、page.json中使用：

代码：

"%pageJson.signOut%"

10、正常页面中使用：

template中：{{$t(`measure.concentration`)}}
script中：this.$t(`measure.linkDevice`)