增加i18n国际化配置

package.json

@@ -29,6 +29,7 @@
     "stompjs": "^2.3.3",
     "storejs": "^1.0.25",
     "vue": "2.6.10",
+    "vue-i18n": "^8.12.0",
     "vue-router": "3.0.6",
     "vuedraggable": "^2.20.0",
     "vuex": "3.1.0",

src/App.vue

@@ -7,5 +7,6 @@
 <script>
 export default {
 	name: 'App'
-}
+};
+
 </script>

src/i18n/index.js

@@ -0,0 +1,7 @@
+import en from 'en';
+import zh from 'zh';
+
+export default {
+	en,
+	zh
+};

src/i18n/langs/en.js

@@ -0,0 +1,5 @@
+import enLocale from 'element-ui/lib/locale/lang/en';
+
+export default {
+	...enLocale
+};

src/i18n/langs/zh.js

@@ -0,0 +1,5 @@
+import cnLocale from 'element-ui/lib/locale/lang/zh-CN';
+
+export default {
+	...cnLocale
+};

src/main.js

@@ -9,25 +9,37 @@ import 'element-ui/lib/theme-chalk/index.css';
 
 import '@/styles/index.scss'; // global css
 
+import Theme from '@/jmap/theme/factory';
+import LangStorage from '@/utils/lang';
 import App from './App';
+import VueI18n from 'vue-i18n';
 import store from './store';
 import router from './router';
-import Theme from '@/jmap/theme/factory';
 
 import '@/icons'; // icon
 import '@/permission'; // permission control
 import '@/scripts/GlobalPlugin';
 import '@/directives';
+import messages from '@/i18n/index';
+
 window.THREE = require('@/jlmap3d/main/three.min.js');
 window.zlib = require('@/jlmap3d/main/inflate.min.js');
+
 Vue.use(ElementUI);
+Vue.use(VueI18n);
 
 Vue.config.productionTip = false;
 
+const i18n = new VueI18n({
+	locale: LangStorage.getLang('zh'),
+	messages
+});
+
 new Vue({
 	el: '#app',
 	router,
 	store,
+	i18n,
 	render: h => h(App)
 });
 

src/utils/baseUrl.js

@@ -4,7 +4,7 @@ export function getBaseUrl() {
 	if (process.env.NODE_ENV === 'development') {
 		// BASE_API = 'https://joylink.club/jlcloud';
 		BASE_API = 'https://test.joylink.club/jlcloud';
-		// BASE_API = 'http://192.168.3.5:9010' // 袁琪
+		// BASE_API = 'http://192.168.3.5:9010'; // 袁琪
 		// BASE_API = 'http://192.168.3.6:9010'; // 旭强
 		// BASE_API = 'http://192.168.3.4:9010' // 琰培
 	} else {

src/utils/lang.js

@@ -0,0 +1,17 @@
+import Cookies from 'js-cookie';
+
+const I18N_LANG = 'user_lang';
+export default {
+	setLang(lang) {
+		Cookies.setItem(I18N_LANG, lang);
+	},
+	getLang(defaultLang) {
+		const localLang = Cookies.getItem(I18N_LANG);
+
+		if (localLang === null) {
+			return defaultLang;
+		} else {
+			return localLang;
+		}
+	}
+};

src/views/demonstration/deomonTopic/index.vue

@@ -1,7 +1,15 @@
 <template>
-    <el-dialog :title="title" :visible.sync="show" width="600px" :before-close="doClose" :zIndex="2000" :modal="false"
+  <el-dialog
-        :close-on-click-modal="false" v-dialogDrag>
+    v-dialogDrag
-        <div style="height: 80px; line-height: 80px; font-size: 16px; padding-left: 10px;">{{roomName}}邀请你加入综合演练！</div>
+    :title="title"
+    :visible.sync="show"
+    width="600px"
+    :before-close="doClose"
+    :z-index="2000"
+    :modal="false"
+    :close-on-click-modal="false"
+  >
+    <div style="height: 80px; line-height: 80px; font-size: 16px; padding-left: 10px;">{{ roomName }}邀请你加入综合演练！</div>
     <span slot="footer" class="dialog-footer">
       <el-button type="primary" @click="handleJoin">确认</el-button>
       <el-button @click="dialogShow = false">取 消</el-button>
@@ -10,11 +18,11 @@
 </template>
 
 <script>
-    import { getjointTraining, putJointTrainingSimulationEntrance } from '@/api/chat';
+import { getjointTraining, putJointTrainingSimulationEntrance } from '@/api/chat';
-    import { getPublishMapInfo } from '@/api/jmap/map';
+import { getPublishMapInfo } from '@/api/jmap/map';
-    import { launchFullscreen } from '@/utils/screen';
+import { launchFullscreen } from '@/utils/screen';
 
-    export default {
+export default {
 	name: 'DeomonList',
 	data() {
 		return {
@@ -22,8 +30,8 @@
 			group: '',
 			roomName: '',
 			state: '',
-                mapId: '',
+			mapId: ''
-            }
+		};
 	},
 	computed: {
 		show() {
@@ -31,7 +39,7 @@
 		},
 		title() {
 			return '综合演练快速入口';
-            },
+		}
 	},
 	mounted() {
 	},
@@ -39,7 +47,7 @@
 		doShow(data) {
 			this.roomName = data.creator.nickName;
 			this.group = data.group;
-                this.state = data.state
+			this.state = data.state;
 			this.mapId = data.mapId;
 			this.dialogShow = true;
 		},
@@ -50,18 +58,18 @@
 			if (this.state == '02') {
 				launchFullscreen();
 				await putJointTrainingSimulationEntrance(this.group);
-                    let rest = await getPublishMapInfo(this.mapId);
+				const rest = await getPublishMapInfo(this.mapId);
-                    let query = { skinStyle: rest.data.skinStyle, mapId: this.mapId, group: this.group };
+				const query = { skinStyle: rest.data.skinStyle, mapId: this.mapId, group: this.group };
 				this.$router.push({ path: `/jointTraining`, query: query });
 			} else if (this.state == '01') {
-                    let query = { group: this.group };
+				const query = { group: this.group };
 				this.$router.push({ path: `/trainroom`, query: query });
 			}
 			this.dialogShow = false;
 			getjointTraining(this.group);
 		}
 	}
-    }
+};
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>