// 第一步引入 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>
uniapp制作语言包切换
于 2022-07-27 15:36:29 首次发布