add lang file

package-lock.json

@@ -46,6 +46,7 @@
         "vue-count-to": "1.0.13",
         "vue-dplayer": "^0.0.10",
         "vue-grid-layout": "^2.4.0",
+        "vue-i18n": "^7.3.3",
         "vue-json-editor": "^1.4.3",
         "vue-router": "3.0.2",
         "vue-splitpane": "1.0.4",
@@ -22801,6 +22802,11 @@
       "integrity": "sha512-BXq3jwIagosjgNVae6tkHzzIk6a8MHFtzAdwhnV5VlvPTFxDCvIttgSiHWjdGoTJvXtmRu5HacExfdarRcFhog==",
       "dev": true
     },
+    "node_modules/vue-i18n": {
+      "version": "7.3.3",
+      "resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-7.3.3.tgz",
+      "integrity": "sha512-d6kYNy6sZ8t2QNj8Y5rpBcWteQUt0wwGeD/5tvx6nuCt9+gRKaEUcHrjcgPDAqK7nnqVpMtkw5CIfKaO1Z9HsA=="
+    },
     "node_modules/vue-jest": {
       "version": "3.0.7",
       "resolved": "https://registry.npmjs.org/vue-jest/-/vue-jest-3.0.7.tgz",
@@ -42403,6 +42409,11 @@
       "integrity": "sha512-BXq3jwIagosjgNVae6tkHzzIk6a8MHFtzAdwhnV5VlvPTFxDCvIttgSiHWjdGoTJvXtmRu5HacExfdarRcFhog==",
       "dev": true
     },
+    "vue-i18n": {
+      "version": "7.3.3",
+      "resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-7.3.3.tgz",
+      "integrity": "sha512-d6kYNy6sZ8t2QNj8Y5rpBcWteQUt0wwGeD/5tvx6nuCt9+gRKaEUcHrjcgPDAqK7nnqVpMtkw5CIfKaO1Z9HsA=="
+    },
     "vue-jest": {
       "version": "3.0.7",
       "resolved": "https://registry.npmjs.org/vue-jest/-/vue-jest-3.0.7.tgz",

package.json

@@ -52,6 +52,7 @@
     "vue-count-to": "1.0.13",
     "vue-dplayer": "^0.0.10",
     "vue-grid-layout": "^2.4.0",
+    "vue-i18n": "^7.3.3",
     "vue-json-editor": "^1.4.3",
     "vue-router": "3.0.2",
     "vue-splitpane": "1.0.4",

public/locales/en.json

@@ -0,0 +1,7 @@
+{
+  "message": {
+    "hello": "中",
+    "back": "Back",
+    "cancel": "Cancel"
+  }
+}

public/locales/zh.json

@@ -0,0 +1,7 @@
+{
+  "message": {
+    "hello": "En",
+    "back": "返回",
+    "cancel": "取消"
+  }
+}

src/layout/components/Navbar.vue

@@ -4,6 +4,7 @@
       <router-link to="/">
         <img src="@/assets/JCCE-logo.png">
       </router-link>
+      <el-button round @click="changeLang">{{ $t('message.hello') }}</el-button>
     </div>
     <div class="top-title">云际计算基础平台</div>
     <div class="right-menu">
@@ -71,6 +72,9 @@ export default {
     }
   },
   methods: {
+    changeLang() {
+      this.$i18n.locale = this.$i18n.locale === 'en' ? 'zh' : 'en'
+    },
     changeLight() {
       document.documentElement.setAttribute('jcceTheme', 'jcceLight')
       localStorage.setItem('jcceTheme', 'jcceLight')

src/main.js

@@ -7,6 +7,9 @@ import 'normalize.css/normalize.css' // a modern alternative to CSS resets
 import Element from 'element-ui'
 import './styles/element-variables.scss'
 // import enLang from 'element-ui/lib/locale/lang/en'// 如果使用中文语言包请默认支持，无需额外引入，请删除该依赖
+import enLocale from 'element-ui/lib/locale/lang/en'
+import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
+import ElementLocale from 'element-ui/lib/locale'
 
 import '@/styles/index.scss' // global css
 
@@ -52,6 +55,9 @@ Vue.prototype.$echarts = echarts
 Vue.prototype.$Api = appApi
 Vue.prototype.$HandleFunc = HandleFunc
 
+import VueI18n from 'vue-i18n'
+Vue.use(VueI18n)
+
 Vue.use(dataV)
 Vue.use(Element, {
   size: Cookies.get('size') // set element-ui default size
@@ -63,11 +69,39 @@ Object.keys(filters).forEach(key => {
   Vue.filter(key, filters[key])
 })
 
+// const messages = {
+//   en: {
+//     message: {
+//       hello: '中',
+//       back: 'Back',
+//       cancel: 'Cancel'
+//     }
+//   },
+//   zh: {
+//     message: {
+//       hello: 'En',
+//       back: '返回',
+//       cancel: '取消'
+//     }
+//   }
+// }
+console.log(Object.assign(require('../public/locales/zh'), zhLocale))
+
+const i18n = new VueI18n({
+  locale: 'zh',
+  messages: {
+    'zh': Object.assign(require('../public/locales/zh.json'), zhLocale),
+    'en': Object.assign(require('../public/locales/en.json'), enLocale)
+  }
+})
+ElementLocale.i18n((key, value) => i18n.t(key, value))
+
 Vue.config.productionTip = false
 Vue.component('codemirror', codemirror)
 new Vue({
   el: '#app',
   router,
   store,
+  i18n,
   render: h => h(App)
 })

src/views/taskManagement/taskList/create.vue

@@ -54,7 +54,7 @@
     </div>
     <el-row type="flex" justify="end">
       <el-col :span="2.5">
-        <el-button size="medium" @click="goBack">取消</el-button>
+        <el-button size="medium" @click="goBack">{{ $t("message.cancel") }}</el-button>
         <el-button size="medium" type="primary" @click="saveForm">保存</el-button>
       </el-col>
     </el-row>

yarn.lock

@@ -12969,6 +12969,11 @@
   "resolved" "https://registry.npmjs.org/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz"
   "version" "2.3.4"
 
+"vue-i18n@^7.3.3":
+  "integrity" "sha512-d6kYNy6sZ8t2QNj8Y5rpBcWteQUt0wwGeD/5tvx6nuCt9+gRKaEUcHrjcgPDAqK7nnqVpMtkw5CIfKaO1Z9HsA=="
+  "resolved" "https://registry.npmjs.org/vue-i18n/-/vue-i18n-7.3.3.tgz"
+  "version" "7.3.3"
+
 "vue-jest@^3.0.5":
   "integrity" "sha512-PIOxFM+wsBMry26ZpfBvUQ/DGH2hvp5khDQ1n51g3bN0TwFwTy4J85XVfxTRMukqHji/GnAoGUnlZ5Ao73K62w=="
   "resolved" "https://registry.npmjs.org/vue-jest/-/vue-jest-3.0.7.tgz"