如何设置i18n在该软件设置过语言的情况下优先选择所设置语言，在没有设置的情况下，获取本系统默认语言就，将系统默认语言设置为当前选择语言。
1、下载依赖：
npm install vue-i18n --save2、创建相关文件（在最外层，与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`)
