uni-app系列回顾总结----项目国际化
实现uni-app商城的国际化翻译
一个官网社区的教程（很清晰）：https://ask.dcloud.net.cn/article/35102
适用于小项目的安装部署；
网上好多教程，根据具体项目情况引入使用；
大项目的引入要把适配文件分离开来：
下面是引入的git更改情况：
main.js
@@ -1,9 +1,10 @@
import Vue from 'vue';
import App from './App';
import wechat from './utils/wechat.js';
-
-// import {RouterMount} from './js_sdk/hhyang-uni-simple-router/index.js';
import RouterMount from './router/index.js'
+// 国际化模块
+import VueI18n from 'vue-i18n'
+Vue.use(VueI18n)
// #ifdef H5
if(wechat.isWechat()){
@@ -38,9 +39,33 @@ Vue.mixin({
}
});
+// 获取默认语言
+var lang = ''
+uni.getSystemInfo({
+ success: (res) => {
+ lang = res.language
+ console.log('当前语言: ',lang)
+ }
+})
+
+const i18n = new VueI18n({
+ locale : lang == 'zh-CN' ? 'zh-CN' : 'en-US' , // 语言识别
+ messages: {
+ 'en-US' : require('utils/lang/en.js'), // 英文语言包
+ 'zh-CN' : require('utils/lang/zh.js') // 中文简体语言包
+ }
+})
+
+Vue.prototype._i18n = i18n
+
+Vue.prototype.$i18nMsg = function(){
+ return i18n.messages[i18n.locale]
+}
+
App.mpType = 'app';
const app = new Vue({
+ i18n, // 国际化
...App
});
package.json
@@ -18,5 +18,8 @@
"uni-read-pages": "^1.0.5",
"jsqr": "^1.3.1",
"quagga": "^0.12.1"
+ },
+ "dependencies": {
+ "vue-i18n": "^8.21.0"
}
}
pages/index/index.vue
@@ -6,7 +6,7 @@
<view class="scrolltop">
<view class="section" @tap="toSearchPage">
<image src="/static/images/icon/search.png" class="search-img"></image>
- <text class="placeholder">搜索</text>
+ <text class="placeholder">{{i18n.search}}</text>
</view>
</view>
</view>
@@ -212,6 +212,11 @@ export default {
onLoad: function () {
this.getAllData();
},
+ //每个需翻译的文件都要引入
+ computed:{
+ i18n() {
+ return this.$t('index')
+ }
+ },
utils/lang/en.js
@@ -0,0 +1,5 @@
+// 英文语言包
+export const index = {
+ "testTitle": 'testTitle',
+ "search": 'Search'
+}
utils/lang/zh.js
@@ -0,0 +1,5 @@
+// 简体中文语言包
+export const index = {
+ "exampleTitle": '测试标题',
+ "search": '搜索'
+}
参考：https://www.jb51.net/article/169355.htm
