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(代碼更新合並)