✨ add i18n

Former-commit-id: e40632a3129a3147d4692474f05fcac1a8fb05da [formerly e40632a3129a3147d4692474f05fcac1a8fb05da [formerly e40632a3129a3147d4692474f05fcac1a8fb05da [formerly e40632a3129a3147d4692474f05fcac1a8fb05da [formerly 8a560e505164fe5718e1f386ecd8c84d213726b1 [formerly 0582bf632cbd9db5164fb2c454399fd1bd64ba41]]]]]
Former-commit-id: d0e35c73fc91d65ac612adf939e15f2c05a6dc1f
Former-commit-id: e6f9e3c3173dc757fd348cfc493055cdf4ed55a7
Former-commit-id: 3ea8c7bf97ab2e1b91986c7cd1a92da4200ecbc0 [formerly f4ffd12918a98e51b9f5f53a0102254e12ccc634]
Former-commit-id: 5eddfc5487865adcbef1d176ab1fabf305614efc
Former-commit-id: 044b0bf737fed573bd305b036c236b0a227bf0e1
Former-commit-id: f85fe58ea89d29b4579023de9829347012d29bc6
Former-commit-id: c91fbfc5efab828f43c8c51216c604a3987973b4
Former-commit-id: d96ee1048ea756123890a74af896b14a851c375d

.env

@@ -1,10 +1,5 @@
-# 所有环境默认
-
-# 页面 title 前缀
 VUE_APP_TITLE=D2Admin
-
-# 网络请求公用地址
 VUE_APP_API=/api/
-
-# 仓库地址
 VUE_APP_REPO=https://github.com/d2-projects/d2-admin
+VUE_APP_I18N_LOCALE=en
+VUE_APP_I18N_FALLBACK_LOCALE=zh

package.json

@@ -3,13 +3,14 @@
   "version": "1.7.0",
   "scripts": {
     "serve": "vue-cli-service serve --open",
-    "start": "npm run serve",
-    "dev": "npm run serve",
     "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint --fix",
+    "build:netlify": "vue-cli-service build --mode netlify",
     "build:nomock": "vue-cli-service build --mode nomock",
     "build:travis": "vue-cli-service build --mode travis",
-    "build:netlify": "vue-cli-service build --mode netlify",
-    "lint": "vue-cli-service lint --fix",
+    "dev": "npm run serve",
+    "i18n:report": "vue-cli-service i18n:report --src './src/**/*.?(js|vue)' --locales './src/locales/**/*.json'",
+    "start": "npm run serve",
     "test:unit": "vue-cli-service test:unit"
   },
   "dependencies": {
@@ -45,6 +46,7 @@
     "v-contextmenu": "^2.8.0",
     "vue": "^2.6.10",
     "vue-grid-layout": "^2.3.4",
+    "vue-i18n": "^8.0.0",
     "vue-json-tree-view": "^2.1.4",
     "vue-router": "^3.0.3",
     "vue-splitpane": "^1.0.4",
@@ -52,6 +54,7 @@
     "vuex": "^3.0.1"
   },
   "devDependencies": {
+    "@kazupon/vue-i18n-loader": "^0.3.0",
     "@vue/cli-plugin-babel": "^3.6.0",
     "@vue/cli-plugin-eslint": "^3.6.0",
     "@vue/cli-plugin-unit-jest": "^3.6.0",
@@ -68,6 +71,7 @@
     "svg-sprite-loader": "^4.1.3",
     "text-loader": "0.0.1",
     "uglifyjs-webpack-plugin": "^2.1.2",
+    "vue-cli-plugin-i18n": "^0.6.0",
     "vue-template-compiler": "^2.5.21"
   }
 }

src/components/HelloI18n.vue

@@ -0,0 +1,17 @@
+<template>
+  <p>{{ $t('hello') }}</p>
+</template>
+
+<script>
+export default {
+  name: 'HelloI18n'
+}
+</script>
+
+<i18n>
+{
+  "en": {
+    "hello": "Hello i18n in SFC!"
+  }
+}
+</i18n>

src/i18n.js

@@ -0,0 +1,23 @@
+import Vue from 'vue'
+import VueI18n from 'vue-i18n'
+
+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
+}
+
+export default new VueI18n({
+  locale: process.env.VUE_APP_I18N_LOCALE || 'en',
+  fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || 'en',
+  messages: loadLocaleMessages()
+})

src/locales/en.json

@@ -0,0 +1,3 @@
+{
+  "message": "hello i18n !!"
+}

src/locales/zh.json

@@ -0,0 +1,3 @@
+{
+  "message": "hello i18n !!"
+}

src/main.js

@@ -31,6 +31,7 @@ import d2VueFiltersDayjs from '@d2-admin/filters-dayjs'
 import router from './router'
 import { menuHeader, menuAside } from '@/menu'
 import { frameInRoutes } from '@/router/routes'
+import i18n from './i18n'
 
 // 核心插件
 Vue.use(d2Admin)
@@ -52,6 +53,7 @@ new Vue({
   router,
   store,
   render: h => h(App),
+
   created () {
     // 处理路由 得到每一级的路由设置
     this.$store.commit('d2admin/page/init', frameInRoutes)
@@ -60,6 +62,7 @@ new Vue({
     // 初始化菜单搜索功能
     this.$store.commit('d2admin/search/init', menuHeader)
   },
+
   mounted () {
     // 展示系统信息
     this.$store.commit('d2admin/releases/versionShow')
@@ -70,6 +73,9 @@ new Vue({
     // 初始化全屏监听
     this.$store.dispatch('d2admin/fullscreen/listen')
   },
+
+  i18n,
+
   watch: {
     // 检测路由变化切换侧边栏内容
     '$route.matched': {

vue.config.js

@@ -12,11 +12,15 @@ process.env.VUE_APP_BUILD_TIME = require('dayjs')().format('YYYY-M-D HH:mm:ss')
 let publicPath = '/'
 
 module.exports = {
-  publicPath, // 根据你的实际情况更改这里
+  // 根据你的实际情况更改这里
+  publicPath,
+
   lintOnSave: true,
+
   devServer: {
     publicPath // 和 publicPath 保持一致
   },
+
   css: {
     loaderOptions: {
       // 设置 scss 公用变量文件
@@ -25,6 +29,7 @@ module.exports = {
       }
     }
   },
+
   // 默认设置: https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-service/lib/config/base.js
   chainWebpack: config => {
     /**
@@ -105,5 +110,14 @@ module.exports = {
         .add('@/mock')
         .end()
     }
+  },
+
+  pluginOptions: {
+    i18n: {
+      locale: 'en',
+      fallbackLocale: 'zh',
+      localeDir: 'locales',
+      enableInSFC: true
+    }
   }
 }

yarn.lock.REMOVED.git-id

@@ -0,0 +1 @@
+8a273c9068198d1dcc8d6b9738808332f76dabcb