build: 设置多语言

4 years ago · 45e879edee
parent 4050d56c19
commit 45e879edee
27 changed files with 511 additions and 1397 deletions
--- a/.eslintignore
+++ b/.eslintignore
@ -8,5 +8,5 @@
 /src/types/env.d.ts
 /dist*
 /src/main.ts
-/src/auto-imports.d.ts
-/src/components.d.ts
+/src/types/auto-imports.d.ts
+/src/types/components.d.ts
--- a/.gitignore
+++ b/.gitignore
@ -3,6 +3,6 @@ node_modules
 dist
 dist-ssr
 *.local
-/src/components.d.ts
-/src/auto-imports.d.ts
+/src/types/components.d.ts
+/src/types/auto-imports.d.ts
 /dist*
--- a/.pnpm-debug.log
+++ b/.pnpm-debug.log
@ -0,0 +1,19 @@
+{
+  "0 debug pnpm:scope": {
+    "selected": 1
+  },
+  "1 error pnpm": {
+    "errno": 1,
+    "code": "ELIFECYCLE",
+    "pkgid": "new-element-plus-admin@0.0.0",
+    "stage": "clean",
+    "script": "npx rimraf docs/node_modules && npx rimraf node_modules",
+    "pkgname": "new-element-plus-admin",
+    "err": {
+      "name": "pnpm",
+      "message": "new-element-plus-admin@0.0.0 clean: `npx rimraf docs/node_modules && npx rimraf node_modules`\nExit status 1",
+      "code": "ELIFECYCLE",
+      "stack": "pnpm: new-element-plus-admin@0.0.0 clean: `npx rimraf docs/node_modules && npx rimraf node_modules`\nExit status 1\n    at EventEmitter.<anonymous> (C:\\Users\\admin\\AppData\\Roaming\\nvm\\v16.0.0\\node_modules\\pnpm\\dist\\pnpm.cjs:103540:20)\n    at EventEmitter.emit (node:events:365:28)\n    at ChildProcess.<anonymous> (C:\\Users\\admin\\AppData\\Roaming\\nvm\\v16.0.0\\node_modules\\pnpm\\dist\\pnpm.cjs:91469:18)\n    at ChildProcess.emit (node:events:365:28)\n    at maybeClose (node:internal/child_process:1067:16)\n    at Process.ChildProcess._handle.onexit (node:internal/child_process:301:5)"
+    }
+  }
+}
--- a/index.html
+++ b/index.html
@ -4,10 +4,139 @@
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite App</title>
+    <title></title>
  </head>
  <body>
-    <div id="app"></div>
+    <div id="app">
+      <style>
+        .app-loading {
+          display: flex;
+          width: 100%;
+          height: 100%;
+          justify-content: center;
+          align-items: center;
+          flex-direction: column;
+          background: #f0f2f5;
+        }
+
+        .app-loading .app-loading-wrap {
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          display: flex;
+          -webkit-transform: translate3d(-50%, -50%, 0);
+          transform: translate3d(-50%, -50%, 0);
+          justify-content: center;
+          align-items: center;
+          flex-direction: column;
+        }
+
+        .app-loading .app-loading-title {
+          margin-bottom: 30px;
+          font-size: 20px;
+          font-weight: bold;
+          text-align: center;
+        }
+
+        .app-loading .app-loading-logo {
+          /* width: 100px; */
+          margin: 0 auto 15px auto;
+        }
+
+        .app-loading .app-loading-item {
+          position: relative;
+          display: inline-block;
+          width: 60px;
+          height: 60px;
+          vertical-align: middle;
+          border-radius: 50%;
+        }
+
+        .app-loading .app-loading-outter {
+          position: absolute;
+          width: 100%;
+          height: 100%;
+          border: 4px solid #2d8cf0;
+          border-bottom: 0;
+          border-left-color: transparent;
+          border-radius: 50%;
+          animation: loader-outter 1s cubic-bezier(0.42, 0.61, 0.58, 0.41) infinite;
+        }
+
+        .app-loading .app-loading-inner {
+          position: absolute;
+          top: calc(50% - 20px);
+          left: calc(50% - 20px);
+          width: 40px;
+          height: 40px;
+          border: 4px solid #87bdff;
+          border-right: 0;
+          border-top-color: transparent;
+          border-radius: 50%;
+          animation: loader-inner 1s cubic-bezier(0.42, 0.61, 0.58, 0.41) infinite;
+        }
+
+        @-webkit-keyframes loader-outter {
+          0% {
+            -webkit-transform: rotate(0deg);
+            transform: rotate(0deg);
+          }
+
+          100% {
+            -webkit-transform: rotate(360deg);
+            transform: rotate(360deg);
+          }
+        }
+
+        @keyframes loader-outter {
+          0% {
+            -webkit-transform: rotate(0deg);
+            transform: rotate(0deg);
+          }
+
+          100% {
+            -webkit-transform: rotate(360deg);
+            transform: rotate(360deg);
+          }
+        }
+
+        @-webkit-keyframes loader-inner {
+          0% {
+            -webkit-transform: rotate(0deg);
+            transform: rotate(0deg);
+          }
+
+          100% {
+            -webkit-transform: rotate(-360deg);
+            transform: rotate(-360deg);
+          }
+        }
+
+        @keyframes loader-inner {
+          0% {
+            -webkit-transform: rotate(0deg);
+            transform: rotate(0deg);
+          }
+
+          100% {
+            -webkit-transform: rotate(-360deg);
+            transform: rotate(-360deg);
+          }
+        }
+      </style>
+      <div class="app-loading">
+        <div class="app-loading-wrap">
+          <div class="app-loading-title">
+            <img src="/logo.png" class="app-loading-logo" alt="Logo" />
+            <div class="app-loading-title">vue-element-plus-admin</div>
+          </div>
+          <div class="app-loading-item">
+            <div class="app-loading-outter"></div>
+            <div class="app-loading-inner"></div>
+          </div>
+        </div>
+      </div>
+    </div>
    <script type="module" src="/src/main.ts"></script>
  </body>
 </html>
--- a/package.json
+++ b/package.json
@ -12,6 +12,7 @@
    "serve:dev": "vite preview --mode dev",
    "serve:test": "vite preview --mode test",
    "check": "npx npm-check-updates",
+    "clean": "npx rimraf docs/node_modules && npx rimraf node_modules",
    "clean:cache": "npx rimraf node_modules/.cache",
    "lint:eslint": "eslint --fix --ext .js,.ts,.vue ./src",
    "lint:format": "prettier --write --loglevel warn \"src/**/*.{js,ts,json,tsx,css,less,vue,html,md}\"",
@ -22,12 +23,14 @@
  },
  "dependencies": {
    "@vueuse/core": "^7.1.2",
-    "vue": "^3.2.16",
+    "vue": "^3.2.24",
+    "vue-i18n": "9.1.9",
    "vue-router": "^4.0.12"
  },
  "devDependencies": {
    "@commitlint/cli": "^15.0.0",
    "@commitlint/config-conventional": "^15.0.0",
+    "@intlify/vite-plugin-vue-i18n": "^3.2.1",
    "@typescript-eslint/eslint-plugin": "^5.6.0",
    "@typescript-eslint/parser": "^5.6.0",
    "@vitejs/plugin-vue": "^1.9.3",
@ -56,7 +59,7 @@
    "typescript": "^4.4.3",
    "unplugin-auto-import": "^0.5.1",
    "unplugin-vue-components": "^0.17.6",
-    "vite": "^2.6.4",
+    "vite": "2.6.14",
    "vite-plugin-eslint": "^1.3.0",
    "vite-plugin-vue-setup-extend": "^0.1.0",
    "vite-plugin-windicss": "^1.5.4",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/public/logo.png
+++ b/public/logo.png
--- a/src/App.vue
+++ b/src/App.vue
@ -1,17 +1,26 @@
-<script setup lang="ts">
-// This starter template is using Vue 3 <script setup> SFCs
-// Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
-import HelloWorld from './components/HelloWorld.vue'
-</script>
-
 <template>
  <div>sss</div>
  <div v:bg="blue-400 hover:blue-500 dark:blue-500 dark:hover:blue-600"> sssss </div>
  <img alt="Vue logo" src="./assets/logo.png" />
  <div>sss</div>
  <HelloWorld msg="Hello Vue 3 + TypeScript + Vite" />
+  <div>{{ t('test.about') }}</div>
+  <div>{{ t('test2.go') }}</div>
+  <button @click="change">切换语言</button>
 </template>

+<script setup lang="ts">
+// This starter template is using Vue 3 <script setup> SFCs
+// Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
+import HelloWorld from './components/HelloWorld.vue'
+const { t, availableLocales, locale } = useI18n()
+
+function change() {
+  const locales = availableLocales
+  locale.value = locales[(locales.indexOf(locale.value) + 1) % locales.length]
+}
+</script>
+
 <style scoped>
 #app {
  margin-top: 60px;
--- a/src/assets/img/404.png
+++ b/src/assets/img/404.png
--- a/src/assets/img/404_cloud.png
+++ b/src/assets/img/404_cloud.png
--- a/src/assets/img/avatar.gif
+++ b/src/assets/img/avatar.gif
--- a/src/assets/img/avatar.png
+++ b/src/assets/img/avatar.png
--- a/src/assets/img/default-avatar.png
+++ b/src/assets/img/default-avatar.png
--- a/src/assets/img/login-bg.jpg
+++ b/src/assets/img/login-bg.jpg
--- a/src/assets/img/logo.png
+++ b/src/assets/img/logo.png
--- a/src/assets/logo.png
+++ b/src/assets/logo.png
--- a/src/locales/en.ts
+++ b/src/locales/en.ts
@ -0,0 +1,8 @@
+export default {
+  test: {
+    about: 'About'
+  },
+  test2: {
+    go: 'Go'
+  }
+}
--- a/src/locales/zh-CN.ts
+++ b/src/locales/zh-CN.ts
@ -0,0 +1,8 @@
+export default {
+  test: {
+    about: '关于'
+  },
+  test2: {
+    go: '去'
+  }
+}
--- a/src/main.ts
+++ b/src/main.ts
@ -1,8 +1,14 @@
 import { createApp } from 'vue'
+
 import App from './App.vue'

-import 'virtual:windi.css'
+const app = createApp(App)
+
+// 引入windi css
+import '@/plugins/windicss'

-import 'virtual:windi-devtools'
+// 引入多语言
+import { setupI18n } from '@/plugins/i18n'
+setupI18n(app)

-createApp(App).mount('#app')
+app.mount('#app')
--- a/src/plugins/i18n/index.ts
+++ b/src/plugins/i18n/index.ts
@ -0,0 +1,17 @@
+import { createI18n } from 'vue-i18n'
+import type { App } from 'vue'
+
+const messages = Object.fromEntries(
+  Object.entries(import.meta.globEager('../../locales/*.ts')).map(([key, value]) => {
+    return [key.slice(14, -3), value.default]
+  })
+)
+
+export function setupI18n(app: App<Element>): void {
+  const i18n = createI18n({
+    legacy: false,
+    locale: 'zh-CN',
+    messages
+  })
+  app.use(i18n)
+}
--- a/src/plugins/windicss/index.ts
+++ b/src/plugins/windicss/index.ts
@ -0,0 +1,3 @@
+import 'virtual:windi.css'
+
+import 'virtual:windi-devtools'
--- a/src/types/env.d.ts
+++ b/src/types/env.d.ts
--- a/src/types/global.d.ts
+++ b/src/types/global.d.ts
--- a/src/types/v-components.d.ts
+++ b/src/types/v-components.d.ts
--- a/tsconfig.json
+++ b/tsconfig.json
@ -22,9 +22,8 @@
    "skipLibCheck": true,
    "paths": {
      "@/*": ["src/*"]
-    }
    },
-  "types": ["element-plus/global", "vite/client"],
-  "typeRoots": ["./node_modules/@types/", "./types"],
-  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue", "components.d.ts"]
+    "types": ["vite/client", "@intlify/vite-plugin-vue-i18n/client"]
+  },
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
 }
--- a/vite.config.ts
+++ b/vite.config.ts
@ -9,6 +9,7 @@ import VueJsx from '@vitejs/plugin-vue-jsx'
 import VueSetupExtend from 'vite-plugin-vue-setup-extend'
 import EslintPlugin from 'vite-plugin-eslint'
 import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
+import VueI18n from '@intlify/vite-plugin-vue-i18n'

 // https://vitejs.dev/config/
 const root = process.cwd()
@ -38,14 +39,14 @@ export default ({ command, mode }: ConfigEnv): UserConfig => {
        imports: [
          'vue',
          'vue-router',
-          // 'vue-i18n',
+          'vue-i18n',
          '@vueuse/core'
        ],
-        dts: 'src/auto-imports.d.ts'
+        dts: 'src/types/auto-imports.d.ts'
      }),
      Components({
        // allow auto load markdown components under `./src/components/`
-        dirs: ['src/components', 'src/layout'],
+        dirs: ['src/components'],
        extensions: ['vue', 'md'],
        // allow auto import and register components used in markdown
        include: [/\.vue$/, /\.vue\?vue/, /\.md$/],
@ -53,11 +54,15 @@ export default ({ command, mode }: ConfigEnv): UserConfig => {
        resolvers: [
          [ElementPlusResolver()]
        ],
-        dts: 'src/components.d.ts'
+        dts: 'src/types/components.d.ts'
      }),
      EslintPlugin({
-        cache: false,
        include: ['src/**/*.vue', 'src/**/*.ts', 'src/**/*.tsx'] // 检查的文件
+      }),
+      VueI18n({
+        runtimeOnly: true,
+        compositionOnly: true,
+        include: [pathResolve(__dirname, 'src/locales/**')],
      })
    ],