From 810407cde0a9622e53ddebb0161242ed35583e8b Mon Sep 17 00:00:00 2001 From: liyang <1711467488@qq.com> Date: Tue, 21 May 2019 23:40:04 +0800 Subject: [PATCH] :sparkles: 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 | 9 ++------- package.json | 11 +++++++---- src/i18n.js | 23 +++++++++++++++++++++++ src/locales/en.json | 3 +++ src/main.js | 6 ++++++ vue.config.js | 16 +++++++++++++++- yarn.lock.REMOVED.git-id | 1 + 7 files changed, 57 insertions(+), 12 deletions(-) create mode 100644 src/i18n.js create mode 100644 src/locales/en.json create mode 100644 yarn.lock.REMOVED.git-id diff --git a/.env b/.env index a31c5bf5..70f48684 100644 --- a/.env +++ b/.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 diff --git a/package.json b/package.json index 5cc8173b..f9293f91 100644 --- a/package.json +++ b/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" } } diff --git a/src/i18n.js b/src/i18n.js new file mode 100644 index 00000000..2b285c50 --- /dev/null +++ b/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() +}) diff --git a/src/locales/en.json b/src/locales/en.json new file mode 100644 index 00000000..d9669836 --- /dev/null +++ b/src/locales/en.json @@ -0,0 +1,3 @@ +{ + "message": "hello i18n !!" +} \ No newline at end of file diff --git a/src/main.js b/src/main.js index ef861c3a..59d06983 100644 --- a/src/main.js +++ b/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': { diff --git a/vue.config.js b/vue.config.js index 47678766..5ae7725b 100644 --- a/vue.config.js +++ b/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 + } } } diff --git a/yarn.lock.REMOVED.git-id b/yarn.lock.REMOVED.git-id new file mode 100644 index 00000000..4f268859 --- /dev/null +++ b/yarn.lock.REMOVED.git-id @@ -0,0 +1 @@ +1de11ec632cee64f600400ccff46f90fd4761a05 \ No newline at end of file