个人门户网站开发用前端框架做自适应网站
如何设置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 = falseApp.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`)