uniapp制作语言包切换

// 第一步引入 vue-i18n 插件
npm i vue-i18n

// 第二步在根目录上创建lang文件夹 并在lang文件夹里 创建 index.js 以及自己需要定义的 各国语言的js文件

// 例如:  en.js fr.js zh.js


// 第三步 将自定义语言包 导出到index.js内

en:
export default {
    index: {
		search: 'search goods',
		hotList: 'hotList',
		classify: 'goods category',
		favorite: 'my favorite',
		poster: 'Poster',
		myteam:'Team',
		group: 'group activities',
		industry: 'information',
		recommend: 'recommend commodities',
		more: 'more',
		allGroup: 'All group',
	},
}

fr：
export default {
	// 首页
	index: {
		search: 'Rechercher des produits',
		hotList: 'Graphiques populaires',
		classify: 'Catégorie de produit',
		favorite: 'Articles de collection',
		poster: 'Poster',
		myteam:'Team',
		group: 'Activités de groupe',
		industry: 'Activités de groupe',
		recommend: 'Des indicateurs complets recommandent des produits',
		more: 'plus',
		allGroup: 'Alle',
	},
}

变量名一定要一致

// 第四步 在index.js中引入自定义语言包 以及插件
import Vue from 'vue'
import VueI18n from 'vue-i18n'
import customZH from './zh.js' // 自定义中文包
import customEn from './en.js' // 自定义英文包
import customFr from './fr.js' // 自定义法语包
Vue.use(VueI18n)// 完成全局注册

// 第五步 创建VueI18n实例对象 并导出

export default new VueI18n ({
    
	locale: uni.getStorageSync('language') || 'en', // locale为当前显示的语言 en对应的是messages 中 自己起的名字
      运用逻辑或 先从本地中取你存储的语言标识 如果取到了 就显示你要切换的 如果没有取到就显示 默认的 en

	messages: { // 将自定义语言包导入 VueI18n实例对象
		zh: {
			...customZH
		},
		en: {
			...customEn
		},
		fr: {
			...customFr
		}
	}
})

// 第六步 在main.js 中 引入index.js
import i18n from './lang' // 默认会找当前 lang文件夹下的 index.js

// #ifdef H5 || APP-PLUS
Vue.prototype.$i18n = i18n // 挂载到全局方法中 方便调用里面的locale
// #endif
// 小程序的话不能挂载全局 

// 第七步 在main.js中将导入的i18n 注入vue实例中
const app = new Vue({
	i18n,
    ...App
})

// 第八步 切换语言
  点击切换语言按钮 将type传进来 type例如: en fr zh
changeLang(type) {
    this.$i18n.locale = type // 手动将locale 赋值为想要切换的语言

    将type存起来 存到language下 与lang文件夹下 index.js中 locale中取得保持一致
    uni.setStorageSync('language',type) // 持久化操作
}


// 页面中使用示例
通过 $t('index.search') 就可以拿到 en文件中的 search goods 或者 fr文件中的 Rechercher des produits

例如: <view class="btn" @click="search"> {{$t('index.search')}} </view>