✨ vue add i18n

Former-commit-id: 93a57ab73023e37e7bd418f4221db12507653d74 [formerly 93a57ab73023e37e7bd418f4221db12507653d74 [formerly 93a57ab73023e37e7bd418f4221db12507653d74 [formerly 93a57ab73023e37e7bd418f4221db12507653d74 [formerly 331c42f3cf9c23bf114ea692b3aa23662d0963a5 [formerly a5f9f2449758fcc55395ccba72fb785b1764b593]]]]]
Former-commit-id: 2084d2f5552ba9ed91ce295cf7bc04e4d2a64e49
Former-commit-id: eb82e859e47e2ec91f48023c705189e538b986e8
Former-commit-id: 4f1713142447f154592c4b74fb5e167df4287be1 [formerly 6daa81e0511c54daab83f96ff69c37b0cd55cc55]
Former-commit-id: 90771d09b3356812c438fa9cb8fa713c7fe86762
Former-commit-id: 58b881a85f8baab6e6ef578575953de17bff0d40
Former-commit-id: aef4bbe6556d4bc4b6eb561c28148dd8b4395cbf
Former-commit-id: b12df0763e624fb55c9832ce4c7ec93ec881b19b
Former-commit-id: 06c2000def6d103aff231bd7a53a02d9ace87ca2

.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=en

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",
@@ -68,6 +70,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/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/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: 'en',
+      localeDir: 'locales',
+      enableInSFC: false
+    }
   }
 }

yarn.lock.REMOVED.git-id

@@ -0,0 +1 @@
+1de11ec632cee64f600400ccff46f90fd4761a05