添加i18n支持

.env

@@ -1 +1,2 @@
-# 所有环境默认
+VUE_APP_I18N_LOCALE=zh-chs
+VUE_APP_I18N_FALLBACK_LOCALE=en

dependencies-cdn.js

@@ -1,6 +1,6 @@
 module.exports = [
   { name: 'vue', library: 'Vue', js: 'https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js', css: '' },
-  // { name: 'vue-i18n', library: 'VueI18n', js: 'https://cdn.jsdelivr.net/npm/vue-i18n@8.17.4/dist/vue-i18n.min.js', css: '' },
+  { name: 'vue-i18n', library: 'VueI18n', js: 'https://cdn.jsdelivr.net/npm/vue-i18n@8.17.3/dist/vue-i18n.min.js', css: '' },
   { name: 'vue-router', library: 'VueRouter', js: 'https://cdn.jsdelivr.net/npm/vue-router@3.1.6/dist/vue-router.min.js', css: '' },
   { name: 'axios', library: 'axios', js: 'https://cdn.jsdelivr.net/npm/axios@0.19.2/dist/axios.min.js', css: '' },
   // { name: 'brace', library: 'ace', js: 'https://cdn.jsdelivr.net/npm/brace@0.11.1/index.min.js', css: '' },

package-lock.json

@@ -1023,6 +1023,16 @@
         "postcss": "^7.0.0"
       }
     },
+    "@intlify/vue-i18n-loader": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npm.taobao.org/@intlify/vue-i18n-loader/download/@intlify/vue-i18n-loader-1.0.0.tgz",
+      "integrity": "sha1-Q1CpsD/WLn1/RMdJbVUJv/MinHk=",
+      "dev": true,
+      "requires": {
+        "js-yaml": "^3.13.1",
+        "json5": "^2.1.1"
+      }
+    },
     "@mrmlnc/readdir-enhanced": {
       "version": "2.2.1",
       "resolved": "http://registry.npm.taobao.org/@mrmlnc/readdir-enhanced/download/@mrmlnc/readdir-enhanced-2.2.1.tgz",
@@ -3054,6 +3064,50 @@
       "integrity": "sha1-BjIjmktapMlYYQFCw0u3plH8jfU=",
       "dev": true
     },
+    "cli-table3": {
+      "version": "0.5.1",
+      "resolved": "https://registry.npm.taobao.org/cli-table3/download/cli-table3-0.5.1.tgz",
+      "integrity": "sha1-AlI3LZTfxA29jfBgBfSPMfZW8gI=",
+      "dev": true,
+      "requires": {
+        "colors": "^1.1.2",
+        "object-assign": "^4.1.0",
+        "string-width": "^2.1.1"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npm.taobao.org/ansi-regex/download/ansi-regex-3.0.0.tgz",
+          "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=",
+          "dev": true
+        },
+        "is-fullwidth-code-point": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npm.taobao.org/is-fullwidth-code-point/download/is-fullwidth-code-point-2.0.0.tgz",
+          "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=",
+          "dev": true
+        },
+        "string-width": {
+          "version": "2.1.1",
+          "resolved": "https://registry.npm.taobao.org/string-width/download/string-width-2.1.1.tgz",
+          "integrity": "sha1-q5Pyeo3BPSjKyBXEYhQ6bZASrp4=",
+          "dev": true,
+          "requires": {
+            "is-fullwidth-code-point": "^2.0.0",
+            "strip-ansi": "^4.0.0"
+          }
+        },
+        "strip-ansi": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npm.taobao.org/strip-ansi/download/strip-ansi-4.0.0.tgz",
+          "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=",
+          "dev": true,
+          "requires": {
+            "ansi-regex": "^3.0.0"
+          }
+        }
+      }
+    },
     "cli-width": {
       "version": "2.2.1",
       "resolved": "https://registry.npm.taobao.org/cli-width/download/cli-width-2.2.1.tgz",
@@ -3167,6 +3221,13 @@
         "simple-swizzle": "^0.2.2"
       }
     },
+    "colors": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npm.taobao.org/colors/download/colors-1.4.0.tgz",
+      "integrity": "sha1-xQSRR51MG9rtLJztMs98fcI2D3g=",
+      "dev": true,
+      "optional": true
+    },
     "combined-stream": {
       "version": "1.0.8",
       "resolved": "https://registry.npm.taobao.org/combined-stream/download/combined-stream-1.0.8.tgz",
@@ -4191,6 +4252,16 @@
         "domelementtype": "1"
       }
     },
+    "dot-object": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npm.taobao.org/dot-object/download/dot-object-1.9.0.tgz",
+      "integrity": "sha1-bj1tg3n3lMUXRZnd8FUo9ZkPB24=",
+      "dev": true,
+      "requires": {
+        "commander": "^2.20.0",
+        "glob": "^7.1.4"
+      }
+    },
     "dot-prop": {
       "version": "5.2.0",
       "resolved": "https://registry.npm.taobao.org/dot-prop/download/dot-prop-5.2.0.tgz?cache=0&sync_timestamp=1572620518450&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fdot-prop%2Fdownload%2Fdot-prop-5.2.0.tgz",
@@ -4560,6 +4631,12 @@
       "integrity": "sha1-4qgs6oT/JGrW+1f5veW0ZiFFnsI=",
       "dev": true
     },
+    "esm": {
+      "version": "3.2.25",
+      "resolved": "https://registry.npm.taobao.org/esm/download/esm-3.2.25.tgz",
+      "integrity": "sha1-NCwYwp1WFXaIulzjH4Qx+7eVzBA=",
+      "dev": true
+    },
     "espree": {
       "version": "6.2.1",
       "resolved": "https://registry.npm.taobao.org/espree/download/espree-6.2.1.tgz",
@@ -5060,6 +5137,23 @@
         "locate-path": "^2.0.0"
       }
     },
+    "flat": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npm.taobao.org/flat/download/flat-5.0.0.tgz",
+      "integrity": "sha1-2rfXHWBBO+ywrC3pv0MESV469q8=",
+      "dev": true,
+      "requires": {
+        "is-buffer": "~2.0.4"
+      },
+      "dependencies": {
+        "is-buffer": {
+          "version": "2.0.4",
+          "resolved": "https://registry.npm.taobao.org/is-buffer/download/is-buffer-2.0.4.tgz?cache=0&sync_timestamp=1569905349018&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fis-buffer%2Fdownload%2Fis-buffer-2.0.4.tgz",
+          "integrity": "sha1-PlcvI8hBGlz9lVfISeNmXgspBiM=",
+          "dev": true
+        }
+      }
+    },
     "flat-cache": {
       "version": "2.0.1",
       "resolved": "https://registry.npm.taobao.org/flat-cache/download/flat-cache-2.0.1.tgz",
@@ -6924,6 +7018,12 @@
       "resolved": "http://registry.npm.taobao.org/is-utf8/download/is-utf8-0.2.1.tgz",
       "integrity": "sha1-Sw2hRCEE0bM2NA6AeX6GXPOffXI="
     },
+    "is-valid-glob": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npm.taobao.org/is-valid-glob/download/is-valid-glob-1.0.0.tgz",
+      "integrity": "sha1-Kb8+/3Ab4tTTFdusw5vDn+j2Aao=",
+      "dev": true
+    },
     "is-windows": {
       "version": "1.0.2",
       "resolved": "http://registry.npm.taobao.org/is-windows/download/is-windows-1.0.2.tgz",
@@ -6994,6 +7094,11 @@
       "resolved": "https://registry.npm.taobao.org/js-base64/download/js-base64-2.5.2.tgz",
       "integrity": "sha1-MTtidN2nGPcU0AszMLuubjjpAgk="
     },
+    "js-cookie": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npm.taobao.org/js-cookie/download/js-cookie-2.2.1.tgz",
+      "integrity": "sha1-aeEG3F1YBolFYpAqpbrsN0Tpsrg="
+    },
     "js-message": {
       "version": "1.0.5",
       "resolved": "https://registry.npm.taobao.org/js-message/download/js-message-1.0.5.tgz",
@@ -11770,6 +11875,39 @@
       "resolved": "https://registry.npm.taobao.org/vue-axios/download/vue-axios-2.1.5.tgz",
       "integrity": "sha1-GvS/EhjtcTCcdq+zjQ9oPjEsJKc="
     },
+    "vue-cli-plugin-i18n": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npm.taobao.org/vue-cli-plugin-i18n/download/vue-cli-plugin-i18n-1.0.1.tgz",
+      "integrity": "sha1-WjB33l1iybQGjkhtsfyX/On6AHI=",
+      "dev": true,
+      "requires": {
+        "debug": "^4.1.0",
+        "deepmerge": "^4.2.0",
+        "dotenv": "^8.2.0",
+        "flat": "^5.0.0",
+        "rimraf": "^3.0.0",
+        "vue": "^2.6.11",
+        "vue-i18n": "^8.17.0",
+        "vue-i18n-extract": "1.0.2"
+      },
+      "dependencies": {
+        "deepmerge": {
+          "version": "4.2.2",
+          "resolved": "https://registry.npm.taobao.org/deepmerge/download/deepmerge-4.2.2.tgz",
+          "integrity": "sha1-RNLqNnm49NT/ujPwPYZfwee/SVU=",
+          "dev": true
+        },
+        "rimraf": {
+          "version": "3.0.2",
+          "resolved": "https://registry.npm.taobao.org/rimraf/download/rimraf-3.0.2.tgz?cache=0&sync_timestamp=1581257110269&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Frimraf%2Fdownload%2Frimraf-3.0.2.tgz",
+          "integrity": "sha1-8aVAK6YiCtUswSgrrBrjqkn9Bho=",
+          "dev": true,
+          "requires": {
+            "glob": "^7.1.3"
+          }
+        }
+      }
+    },
     "vue-eslint-parser": {
       "version": "7.0.0",
       "resolved": "https://registry.npm.taobao.org/vue-eslint-parser/download/vue-eslint-parser-7.0.0.tgz",
@@ -11802,6 +11940,152 @@
       "integrity": "sha1-UylVzB6yCKPZkLOp+acFdGV+CPI=",
       "dev": true
     },
+    "vue-i18n": {
+      "version": "8.17.4",
+      "resolved": "https://registry.npm.taobao.org/vue-i18n/download/vue-i18n-8.17.4.tgz",
+      "integrity": "sha1-0xTfej+geA+Gz/RqAnUmaPibOTU="
+    },
+    "vue-i18n-extract": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npm.taobao.org/vue-i18n-extract/download/vue-i18n-extract-1.0.2.tgz",
+      "integrity": "sha1-ChNuEtFjTWeZ4Yeq2BpwA9AvZ6U=",
+      "dev": true,
+      "requires": {
+        "cli-table3": "^0.5.1",
+        "dot-object": "^1.7.1",
+        "esm": "^3.2.13",
+        "glob": "^7.1.3",
+        "is-valid-glob": "^1.0.0",
+        "yargs": "^13.2.2"
+      },
+      "dependencies": {
+        "cliui": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npm.taobao.org/cliui/download/cliui-5.0.0.tgz",
+          "integrity": "sha1-3u/P2y6AB4SqNPRvoI4GhRx7u8U=",
+          "dev": true,
+          "requires": {
+            "string-width": "^3.1.0",
+            "strip-ansi": "^5.2.0",
+            "wrap-ansi": "^5.1.0"
+          }
+        },
+        "emoji-regex": {
+          "version": "7.0.3",
+          "resolved": "https://registry.npm.taobao.org/emoji-regex/download/emoji-regex-7.0.3.tgz",
+          "integrity": "sha1-kzoEBShgyF6DwSJHnEdIqOTHIVY=",
+          "dev": true
+        },
+        "find-up": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npm.taobao.org/find-up/download/find-up-3.0.0.tgz",
+          "integrity": "sha1-SRafHXmTQwZG2mHsxa41XCHJe3M=",
+          "dev": true,
+          "requires": {
+            "locate-path": "^3.0.0"
+          }
+        },
+        "is-fullwidth-code-point": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npm.taobao.org/is-fullwidth-code-point/download/is-fullwidth-code-point-2.0.0.tgz",
+          "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=",
+          "dev": true
+        },
+        "locate-path": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npm.taobao.org/locate-path/download/locate-path-3.0.0.tgz",
+          "integrity": "sha1-2+w7OrdZdYBxtY/ln8QYca8hQA4=",
+          "dev": true,
+          "requires": {
+            "p-locate": "^3.0.0",
+            "path-exists": "^3.0.0"
+          }
+        },
+        "p-limit": {
+          "version": "2.3.0",
+          "resolved": "https://registry.npm.taobao.org/p-limit/download/p-limit-2.3.0.tgz",
+          "integrity": "sha1-PdM8ZHohT9//2DWTPrCG2g3CHbE=",
+          "dev": true,
+          "requires": {
+            "p-try": "^2.0.0"
+          }
+        },
+        "p-locate": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npm.taobao.org/p-locate/download/p-locate-3.0.0.tgz",
+          "integrity": "sha1-Mi1poFwCZLJZl9n0DNiokasAZKQ=",
+          "dev": true,
+          "requires": {
+            "p-limit": "^2.0.0"
+          }
+        },
+        "p-try": {
+          "version": "2.2.0",
+          "resolved": "https://registry.npm.taobao.org/p-try/download/p-try-2.2.0.tgz",
+          "integrity": "sha1-yyhoVA4xPWHeWPr741zpAE1VQOY=",
+          "dev": true
+        },
+        "string-width": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npm.taobao.org/string-width/download/string-width-3.1.0.tgz",
+          "integrity": "sha1-InZ74htirxCBV0MG9prFG2IgOWE=",
+          "dev": true,
+          "requires": {
+            "emoji-regex": "^7.0.1",
+            "is-fullwidth-code-point": "^2.0.0",
+            "strip-ansi": "^5.1.0"
+          }
+        },
+        "strip-ansi": {
+          "version": "5.2.0",
+          "resolved": "https://registry.npm.taobao.org/strip-ansi/download/strip-ansi-5.2.0.tgz",
+          "integrity": "sha1-jJpTb+tq/JYr36WxBKUJHBrZwK4=",
+          "dev": true,
+          "requires": {
+            "ansi-regex": "^4.1.0"
+          }
+        },
+        "wrap-ansi": {
+          "version": "5.1.0",
+          "resolved": "https://registry.npm.taobao.org/wrap-ansi/download/wrap-ansi-5.1.0.tgz?cache=0&sync_timestamp=1587574502741&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fwrap-ansi%2Fdownload%2Fwrap-ansi-5.1.0.tgz",
+          "integrity": "sha1-H9H2cjXVttD+54EFYAG/tpTAOwk=",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^3.2.0",
+            "string-width": "^3.0.0",
+            "strip-ansi": "^5.0.0"
+          }
+        },
+        "yargs": {
+          "version": "13.3.2",
+          "resolved": "https://registry.npm.taobao.org/yargs/download/yargs-13.3.2.tgz",
+          "integrity": "sha1-rX/+/sGqWVZayRX4Lcyzipwxot0=",
+          "dev": true,
+          "requires": {
+            "cliui": "^5.0.0",
+            "find-up": "^3.0.0",
+            "get-caller-file": "^2.0.1",
+            "require-directory": "^2.1.1",
+            "require-main-filename": "^2.0.0",
+            "set-blocking": "^2.0.0",
+            "string-width": "^3.0.0",
+            "which-module": "^2.0.0",
+            "y18n": "^4.0.0",
+            "yargs-parser": "^13.1.2"
+          }
+        },
+        "yargs-parser": {
+          "version": "13.1.2",
+          "resolved": "https://registry.npm.taobao.org/yargs-parser/download/yargs-parser-13.1.2.tgz",
+          "integrity": "sha1-Ew8JcC667vJlDVTObj5XBvek+zg=",
+          "dev": true,
+          "requires": {
+            "camelcase": "^5.0.0",
+            "decamelize": "^1.2.0"
+          }
+        }
+      }
+    },
     "vue-loader": {
       "version": "15.9.1",
       "resolved": "https://registry.npm.taobao.org/vue-loader/download/vue-loader-15.9.1.tgz?cache=0&sync_timestamp=1584584267698&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-loader%2Fdownload%2Fvue-loader-15.9.1.tgz",

package.json

@@ -6,21 +6,25 @@
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
     "lint": "vue-cli-service lint",
-    "analyz": "npm_config_report=true npm run build"
+    "analyz": "npm_config_report=true npm run build",
+    "i18n:report": "vue-cli-service i18n:report --src './src/**/*.?(js|vue)' --locales './src/locales/**/*.json'"
   },
   "dependencies": {
     "axios": "^0.19.2",
     "bulma": "^0.8.2",
     "core-js": "^3.6.4",
+    "js-cookie": "^2.2.1",
     "markdown-it": "^10.0.0",
     "node-sass": "^4.14.0",
     "sass-loader": "^8.0.2",
     "vue": "^2.6.11",
     "vue-axios": "^2.1.5",
+    "vue-i18n": "^8.17.3",
     "vue-router": "^3.1.6",
     "vue2-ace-editor": "0.0.15"
   },
   "devDependencies": {
+    "@intlify/vue-i18n-loader": "^1.0.0",
     "@vue/cli-plugin-babel": "~4.3.0",
     "@vue/cli-plugin-eslint": "~4.3.0",
     "@vue/cli-service": "~4.3.0",
@@ -28,6 +32,7 @@
     "eslint": "^6.7.2",
     "eslint-plugin-vue": "^6.2.2",
     "fs": "0.0.1-security",
+    "vue-cli-plugin-i18n": "~1.0.1",
     "vue-template-compiler": "^2.6.11",
     "webpack-bundle-analyzer": "^3.7.0"
   },

public/app.js

@@ -1,26 +1,33 @@
 var styles = [
-    'https://cloud.jsonpop.cn/go2index/dist/test/app.069f50e0.css'
+  "https://cloud.jsonpop.cn/go2index/vue/dist/css/app.15d37280.css",
-]
+];
 var scripts = [
-    'https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js',
+  "https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js",
-    'https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js',
+  "https://cdn.jsdelivr.net/npm/vue-i18n@8.17.3/dist/vue-i18n.min.js",
-    'https://cdn.jsdelivr.net/npm/axios@0.19.2/dist/axios.min.js',
+  "https://cdn.jsdelivr.net/npm/vue-router@3.1.6/dist/vue-router.min.js",
-    'https://cdn.jsdelivr.net/npm/brace@0.11.1/index.min.js',
+  "https://cdn.jsdelivr.net/npm/axios@0.19.2/dist/axios.min.js",
-    'https://cdn.jsdelivr.net/npm/brace@0.11.1/ext/language_tools.js',
+  // 'https://cdn.jsdelivr.net/npm/brace@0.11.1/index.min.js',
-    'https://cdn.jsdelivr.net/npm/brace@0.11.1/mode/html.js',
+  // 'https://cdn.jsdelivr.net/npm/brace@0.11.1/ext/language_tools.js',
-    'https://cdn.jsdelivr.net/npm/brace@0.11.1/mode/javascript.js',
+  // 'https://cdn.jsdelivr.net/npm/brace@0.11.1/mode/html.js',
-    'https://cdn.jsdelivr.net/npm/brace@0.11.1/mode/less.js',
+  // 'https://cdn.jsdelivr.net/npm/brace@0.11.1/mode/javascript.js',
-    'https://cdn.jsdelivr.net/npm/brace@0.11.1/theme/chrome.js',
+  // 'https://cdn.jsdelivr.net/npm/brace@0.11.1/mode/less.js',
-    'https://cdn.jsdelivr.net/npm/brace@0.11.1/snippets/javascript.js',
+  // 'https://cdn.jsdelivr.net/npm/brace@0.11.1/theme/chrome.js',
-    'https://cdn.jsdelivr.net/npm/markdown-it@10.0.0/dist/markdown-it.min.js',
+  // 'https://cdn.jsdelivr.net/npm/brace@0.11.1/snippets/javascript.js',
-    'https://cloud.jsonpop.cn/go2index/dist/test/chunk-vendors.fefb89d7.js',
+  "https://cdn.jsdelivr.net/npm/markdown-it@10.0.0/dist/markdown-it.min.js",
-    'https://cloud.jsonpop.cn/go2index/dist/test/chunk-1de57003.56998a8f.js',
+  "https://cloud.jsonpop.cn/go2index/vue/dist/js/chunk-1ed22f12.04581a30.js",
-    'https://cloud.jsonpop.cn/go2index/dist/test/app.7e7fe63d.js'
+  "https://cloud.jsonpop.cn/go2index/vue/dist/js/chunk-vendors.1a3ef683.js",
-]
+  "https://cloud.jsonpop.cn/go2index/vue/dist/js/chunk-4850b756.26fb9f5b.js",
+  "https://cloud.jsonpop.cn/go2index/vue/dist/js/app.f79caaca.js",
+  "https://cloud.jsonpop.cn/go2index/vue/dist/js/chunk-56b11c46.aabf7f7a.js",
+  "https://cloud.jsonpop.cn/go2index/vue/dist/js/chunk-6a24b24e.b6c1758e.js",
+  "https://cloud.jsonpop.cn/go2index/vue/dist/app.js",
+  "https://cloud.jsonpop.cn/go2index/vue/dist/js/chunk-2d0aed92.4702bce7.js",
+  "https://cloud.jsonpop.cn/go2index/vue/dist/js/chunk-2d2137a3.e34d1790.js",
+];
 
-styles.forEach(item => {
+styles.forEach((item) => {
-    document.write(`<link rel="stylesheet" href="${item}">`);
+  document.write(`<link rel="stylesheet" href="${item}">`);
-})
+});
-scripts.forEach(item => {
+scripts.forEach((item) => {
-    document.write(`<script src="${item}"></script>`);
+  document.write(`<script src="${item}"></script>`);
-})
+});

src/App.vue

@@ -5,6 +5,7 @@
 </template>
 
 <script>
+import util from '@/libs/util'
 import Layout from "./views/Layout";
 
 export default {
@@ -21,6 +22,18 @@ export default {
       }
     };
   },
+  watch: {
+    '$i18n.locale': 'i18nHandle'
+  },
+  created () {
+    this.i18nHandle(this.$i18n.locale)
+  },
+  methods: {
+    i18nHandle (val, oldVal) {
+      util.cookies.set('lang', val)
+      document.querySelector('html').setAttribute('lang', val)
+    }
+  },
   mounted() {
     let scripts = ["https://at.alicdn.com/t/font_1760192_zf96psu0uo.js"];
     scripts.map(item => {

src/i18n.js

@@ -0,0 +1,31 @@
+import Vue from 'vue'
+import VueI18n from 'vue-i18n'
+import util from '@/libs/util'
+
+Vue.use(VueI18n)
+
+function loadLocaleMessages () {
+  const locales = require.context('./locales', true, /[A-Za-z0-9-_,\s]+\.json$/i)
+  const messages = {}
+  locales.keys().forEach(key => {
+    const matched = key.match(/([A-Za-z0-9-_]+)\./i)
+    if (matched && matched.length > 1) {
+      const locale = matched[1]
+      messages[locale] = locales(key)
+    }
+  })
+  return messages
+}
+
+const messages = loadLocaleMessages()
+
+Vue.prototype.$languages = Object.keys(messages).map(langlage => ({
+  label: messages[langlage]._name,
+  value: langlage
+}))
+
+export default new VueI18n({
+  locale: util.cookies.get('lang') || process.env.VUE_APP_I18N_LOCALE,
+  fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE,
+  messages
+})

src/layout/header-aside/components/header-locales/index.vue

@@ -0,0 +1,34 @@
+<template>
+  <div class="navbar-item has-dropdown is-hoverable">
+    <a class="navbar-link is-arrowless">
+      <i class="fa fa-language"></i>
+    </a>
+    <div class="navbar-dropdown is-left">
+      <a
+        :class="'navbar-item'+(currLanguage===language.value?' is-active':'')"
+        v-for="language in $languages"
+        :key="language.value"
+        @click="onChangeLocale(language.value)"
+      >{{ language.label }}</a>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      currLanguage : ''
+    }
+  },
+  methods: {
+    onChangeLocale(command) {
+      this.currLanguage = command
+      this.$i18n.locale = command;
+    }
+  },
+  created() {
+    this.currLanguage = this.$i18n.locale
+  }
+};
+</script>

src/libs/util.cookies.js

@@ -0,0 +1,42 @@
+import Cookies from 'js-cookie'
+
+const cookies = {}
+
+/**
+ * @description 存储 cookie 值
+ * @param {String} name cookie name
+ * @param {String} value cookie value
+ * @param {Object} setting cookie setting
+ */
+cookies.set = function (name = 'default', value = '', cookieSetting = {}) {
+  let currentCookieSetting = {
+    expires: 1
+  }
+  Object.assign(currentCookieSetting, cookieSetting)
+  Cookies.set(`d2admin-${process.env.VUE_APP_VERSION}-${name}`, value, currentCookieSetting)
+}
+
+/**
+ * @description 拿到 cookie 值
+ * @param {String} name cookie name
+ */
+cookies.get = function (name = 'default') {
+  return Cookies.get(`d2admin-${process.env.VUE_APP_VERSION}-${name}`)
+}
+
+/**
+ * @description 拿到 cookie 全部的值
+ */
+cookies.getAll = function () {
+  return Cookies.get()
+}
+
+/**
+ * @description 删除 cookie
+ * @param {String} name cookie name
+ */
+cookies.remove = function (name = 'default') {
+  return Cookies.remove(`d2admin-${process.env.VUE_APP_VERSION}-${name}`)
+}
+
+export default cookies

src/libs/util.js

@@ -0,0 +1,34 @@
+import cookies from './util.cookies'
+// import db from './util.db'
+// import log from './util.log'
+
+const util = {
+  cookies,
+  // db,
+  // log
+}
+
+/**
+ * @description 更新标题
+ * @param {String} title 标题
+ */
+util.title = function (titleText) {
+  const processTitle = process.env.VUE_APP_TITLE || 'D2Admin'
+  window.document.title = `${processTitle}${titleText ? ` | ${titleText}` : ''}`
+}
+
+/**
+ * @description 打开新页面
+ * @param {String} url 地址
+ */
+util.open = function (url) {
+  var a = document.createElement('a')
+  a.setAttribute('href', url)
+  a.setAttribute('target', '_blank')
+  a.setAttribute('id', 'd2admin-link-temp')
+  document.body.appendChild(a)
+  a.click()
+  document.body.removeChild(document.getElementById('d2admin-link-temp'))
+}
+
+export default util

src/locales/en.json

@@ -0,0 +1,25 @@
+{
+  "_name": "English",
+  "languages": "Languages",
+  "list": {
+    "title": {
+        "file": "File",
+        "moditime": "Modified Time",
+        "size": "Size",
+        "operation": "Operation"
+    },
+    "loading": "Loading...",
+    "opt": {
+        "newTab": "Open a new tab",
+        "download": "Download"
+    }
+  },
+  "search": {
+      "placeholder": "Search or jump to…"
+  },
+  "page": {
+      "text": {
+          "loading": "Loading..."
+      }
+  }
+}

src/locales/zh-chs.json

@@ -0,0 +1,25 @@
+{
+    "_name": "简体中文",
+    "languages": "选择语言",
+    "list": {
+        "title": {
+            "file": "文件",
+            "moditime": "修改时间",
+            "size": "大小",
+            "operation": "操作"
+        },
+        "loading": "加载中...",
+        "opt": {
+            "newTab": "打开新的标签页",
+            "download": "下载"
+        }
+    },
+    "search": {
+        "placeholder": "搜索..."
+    },
+    "page": {
+        "text": {
+            "loading": "加载中..."
+        }
+    }
+}

src/locales/zh-cht.json

@@ -0,0 +1,25 @@
+{
+    "_name": "繁体中文",
+    "languages": "選擇語言",
+    "list": {
+        "title": {
+            "file": "文件",
+            "moditime": "修改時間",
+            "size": "大小",
+            "operation": "操作"
+        },
+        "loading": "加載中...",
+        "opt": {
+            "newTab": "打開新的標簽頁",
+            "download": "下載"
+        }
+    },
+    "search": {
+        "placeholder": "搜索..."
+    },
+    "page": {
+        "text": {
+            "loading": "加載中..."
+        }
+    }
+}

src/main.js

@@ -3,6 +3,7 @@ import App from './App.vue'
 import axios from '@utils/axios'
 import VueAxios from 'vue-axios'
 import router from './router'
+import i18n from './i18n'
 
 var styles = [
   // 'https://cdn.jsdelivr.net/npm/bulma@0.8.1/css/bulma.min.css',
@@ -23,5 +24,6 @@ Vue.use(VueAxios,axios)
 
 new Vue({
   router,
-  render: h => h(App),
+  i18n,
+  render: h => h(App)
 }).$mount('#app')

src/router/index.js

@@ -33,11 +33,13 @@ const router = new VueRouter({
  * 权限验证
  */
 router.beforeEach(async (to, from, next) => {
+  console.log("before:")
   console.log(to)
   next()
 })
 
 router.afterEach(to => {
+  console.log("after:")
   console.log(to)
 })
 

src/views/common/Navbar.vue

@@ -45,7 +45,7 @@
                   @keyup.enter="query"
                   v-model="param"
                   type="search"
-                  placeholder="Search or jump to…"
+                  :placeholder="$t('search.placeholder')"
                 />
                 <span class="icon is-small is-left">
                   <i class="fas fa-search"></i>
@@ -53,16 +53,7 @@
               </p>
             </div>
           </div>
-          <div class="navbar-item has-dropdown is-hoverable">
+          <header-locales/>
-            <a class="navbar-link">
-              <i class="fa fa-language"></i>
-            </a>
-            <div class="navbar-dropdown is-boxed">
-              <a class="navbar-item">中文简体</a>
-              <a class="navbar-item">中文繁体</a>
-              <a class="navbar-item">English</a>
-            </div>
-          </div>
           <a
             class="navbar-item"
             target="_blank"
@@ -79,7 +70,11 @@
 </template>
 
 <script>
+import headerLocales from '@/layout/header-aside/components/header-locales'
 export default {
+  components: {
+    headerLocales
+  },
   created() {
     if (window.gds && window.gds.length > 0) {
       this.gds = window.gds.map((item, index) => {

src/views/page/GoList.vue

@@ -34,12 +34,12 @@
               <span class="icon" @click.stop="go(file,'_blank')">
                 <i
                   class="fa fa-external-link faa-shake animated-hover"
-                  title="Open a new tab"
+                  :title="$t('list.opt.newTab')"
                   aria-hidden="true"
                 ></i>
               </span>
               <span class="icon" @click="go(file,'down')">
-                <i class="fa fa-download faa-shake animated-hover" title="Download"></i>
+                <i class="fa fa-download faa-shake animated-hover" :title="$t('list.opt.download')"></i>
               </span>
             </td>
           </tr>
@@ -47,7 +47,7 @@
       </table>
       <div v-show="files.length==0" class="has-text-centered no-content"></div>
       <div v-show="loading" class="pageloader is-active">
-        <span class="title">Loading...</span>
+        <span class="title">{{$t('list.loading')}}</span>
       </div>
     </div>
     <hr />
@@ -60,6 +60,10 @@ import { utc2beijing, formatFileSize, checkoutPath } from "@utils/AcrouUtil";
 import axios from "@/utils/axios";
 import Markdown from "../common/Markdown";
 export default {
+  components: {
+    Headmd: Markdown,
+    Readmemd: Markdown
+  },
   data: function() {
     return {
       page: {
@@ -68,24 +72,6 @@ export default {
       },
       files: [],
       loading: true,
-      columns: [
-        { name: "文件", style: "" },
-        {
-          name: "修改时间",
-          style: "width:20%",
-          class: "is-hidden-mobile is-hidden-touch"
-        },
-        {
-          name: "大小",
-          style: "width:10.5%",
-          class: "is-hidden-mobile is-hidden-touch"
-        },
-        {
-          name: "下载",
-          style: "width:10%",
-          class: "is-hidden-mobile is-hidden-touch"
-        }
-      ],
       icon: {
         "application/vnd.google-apps.folder": "icon-morenwenjianjia",
         "video/mp4": "icon-mp",
@@ -115,9 +101,27 @@ export default {
       readmemd: { display: false, file: {}, path: "" }
     };
   },
-  components: {
+  computed: {
-    Headmd: Markdown,
+    columns() {
-    Readmemd: Markdown
+      return [
+        { name: this.$t('list.title.file'), style: "" },
+        {
+          name: this.$t('list.title.moditime'),
+          style: "width:20%",
+          class: "is-hidden-mobile is-hidden-touch"
+        },
+        {
+          name: this.$t('list.title.size'),
+          style: "width:10.5%",
+          class: "is-hidden-mobile is-hidden-touch"
+        },
+        {
+          name: this.$t('list.title.operation'),
+          style: "width:10%",
+          class: "is-hidden-mobile is-hidden-touch"
+        }
+      ]
+    }
   },
   mounted() {
     this.render();

src/views/page/GoText.vue

@@ -52,7 +52,7 @@ export default {
   methods: {
     render() {
       let path = window.location.pathname
-      this.content = "加载中...";
+      this.content = this.$t('page.text.loading');
       get_file({path: path.replace('?a=view','/'),file: {}}, (data) => {
         this.content = data;
       });

vue.config.js

@@ -20,6 +20,7 @@ const cdn = {
 module.exports = {
   publicPath,
   lintOnSave: true,
+
   configureWebpack: config => {
     const configNew = {}
     if (process.env.NODE_ENV === 'production') {
@@ -27,6 +28,7 @@ module.exports = {
     }
     return configNew
   },
+
   chainWebpack: (config) => {
     /**
      * 添加 CDN 参数到 htmlWebpackPlugin 配置中
@@ -52,8 +54,10 @@ module.exports = {
         .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
     }
   },
+
   // 不输出 map 文件
   productionSourceMap: false,
+
   devServer: {
     publicPath,
     proxy: {
@@ -67,4 +71,13 @@ module.exports = {
       },
     },
   },
-};
+
+  pluginOptions: {
+    i18n: {
+      locale: 'zh-chs',
+      fallbackLocale: 'en',
+      localeDir: 'locales',
+      enableInSFC: true
+    }
+  }
+};