1.下载vue-i18n
npm i vue-i18n
2. 在static目录下面新建lang文件夹,lang文件夹下面新建text-en.json和tetx-zh.json
text-en.json
{
"index": {
"headerSerch": {
"s_commodity": "search goods"
}
},
"goods_search": {
"s_name": "search goods",
"search": "search",
"s_history": "Search history",
"s_popular": "Popular search"
},
"goods_list": {
"s_name": "Search product name",
"default": "default"
}
}
tetx-zh.json
{
"index": {
"headerSerch": {
"s_commodity": "搜索商品"
}
},
"goods_search": {
"s_name": "点击搜索商品",
"search": "搜索",
"s_history": "搜索历史",
"s_popular": "热门搜索"
},
"goods_list": {
"s_name": "搜索商品名称",
"default": "默认"
}
}
3.在main.js中引入vue-i18n
import VueI18n from "vue-i18n";
Vue.use(VueI18n);
const i18n = new VueI18n({
locale: uni.getStorageSync('lang') == undefined || uni.getStorageSync('lang') == "" || uni.getStorageSync('lang') == null ?
"zh" : uni.getStorageSync('lang'),
messages: {
zh: require("./static/lang/text-zh.json"),
en: require("./static/lang/text-en.json")
}
});
Vue.prototype._i18n = i18n
4.在页面中使用
5.切换语言
this._i18n.locale = 'zh'