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

uni-app系列回顾总结----项目国际化2(翻译问题与解决方案)总结

uni-app系列回顾总结----项目国际化3(代码更新合并)