增加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,67 +1,75 @@
 <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"
-        <span slot="footer" class="dialog-footer">
+    :visible.sync="show"
-            <el-button type="primary" @click="handleJoin">确认</el-button>
+    width="600px"
-            <el-button @click="dialogShow = false">取 消</el-button>
+    :before-close="doClose"
-        </span>
+    :z-index="2000"
-    </el-dialog>
+    :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>
+    </span>
+  </el-dialog>
 </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',
+	name: 'DeomonList',
-        data() {
+	data() {
-            return {
+		return {
-                dialogShow: false,
+			dialogShow: false,
-                group: '',
+			group: '',
-                roomName: '',
+			roomName: '',
-                state: '',
+			state: '',
-                mapId: '',
+			mapId: ''
-            }
+		};
-        },
+	},
-        computed: {
+	computed: {
-            show() {
+		show() {
-                return this.dialogShow;
+			return this.dialogShow;
-            },
+		},
-            title() {
+		title() {
-                return '综合演练快速入口';
+			return '综合演练快速入口';
-            },
+		}
-        },
+	},
-        mounted() {
+	mounted() {
-        },
+	},
-        methods: {
+	methods: {
-            doShow(data) {
+		doShow(data) {
-                this.roomName = data.creator.nickName;
+			this.roomName = data.creator.nickName;
-                this.group = data.group;
+			this.group = data.group;
-                this.state = data.state
+			this.state = data.state;
-                this.mapId = data.mapId;
+			this.mapId = data.mapId;
-                this.dialogShow = true;
+			this.dialogShow = true;
-            },
+		},
-            doClose() {
+		doClose() {
-                this.dialogShow = false;
+			this.dialogShow = false;
-            },
+		},
-            async handleJoin() {
+		async handleJoin() {
-                if (this.state == '02') {
+			if (this.state == '02') {
-                    launchFullscreen();
+				launchFullscreen();
-                    await putJointTrainingSimulationEntrance(this.group);
+				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 });
+				this.$router.push({ path: `/jointTraining`, query: query });
-                } else if (this.state == '01') {
+			} else if (this.state == '01') {
-                    let query = { group: this.group };
+				const query = { group: this.group };
-                    this.$router.push({ path: `/trainroom`, query: query });
+				this.$router.push({ path: `/trainroom`, query: query });
-                }
+			}
-                this.dialogShow = false;
+			this.dialogShow = false;
-                getjointTraining(this.group);
+			getjointTraining(this.group);
-            }
+		}
-        }
+	}
-    }
+};
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>