uniapp中使用vue-i18n實現國際化多語言

最近uniapp的一個項目 須要用到國際化切換 作一個總結

1. 首先看一下目錄結構

2. 準備好vue-i18n的js文件（下方有源碼地址）

3. lang 文件夾下面寫國際化語言的邏輯

1.將所須要的文件引入（en.js zh.js vue-i18n 等） 2. 獲取設備信息 ，並保存本地 目的: 是爲了知道用戶手機用的是什麼語言，方便用戶一進來看到的就是他設備設置的語言，我這裏是將獲取到的信息所有保存了（項目中須要），也能夠只保存system_info.language 代碼以下（寫在lang/index.js文件中）：

import LangEn from './en.js'
import LangChs from './zh.js'
import Vue from 'vue'
import VueI18n from './vue-i18n'
Vue.use(VueI18n)
const system_info = uni.getStorageSync('system_info')
if (!system_info) {
	// 獲取設備信息
	uni.getSystemInfo({
		success: function (res) {
			uni.setStorageSync('system_info', res);
		}
	})
}
	const cur_lang = system_info.language == 'en' ? 'en' : 'zh_CN'
	const i18n = new VueI18n({
		locale: cur_lang || 'zh_CN',  // 默認選擇的語言
		messages: {  
				'en': LangEn,
				'zh_CN': LangChs
			}
	})
	export default i18n
複製代碼

4. main.js中引入

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

Vue.config.productionTip = false

App.mpType = 'app'

import i18n from './lang/index' 
Vue.prototype._i18n = i18n
const app = new Vue({
    i18n,
		...App
})
app.$mount()
複製代碼

5.項目中引入

uniapp 不支持在取值表達式中直接調方法，所以，$t方法不可用，因此經過計算屬性的方式：

<template>
	<view class="content">
		<image class="logo" src="/static/logo.png"></image>
		<view class="text-area">
			<text>{{ i18n.game }}</text>  
		</view>
		<button type="primary" @tap="change">切換語言</button>
	</view>
</template>
複製代碼

computed: {  
 i18n () {  
    return this.$t('index')  
 }  
},
複製代碼

6.demo地址

github.com/menglin1997…