3.1.0版本发布，支持模块化语言包，升级vite版本为4.0

README.md

@@ -1,6 +1,9 @@
 # `Ray Template`
+
 <!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
+
 [![All Contributors](https://img.shields.io/badge/all_contributors-1-orange.svg?style=flat-square)](#contributors-)
+
 <!-- ALL-CONTRIBUTORS-BADGE:END -->
 
 ## 感谢
@@ -14,7 +17,7 @@
 
 ## 前言
 
-> 该项目模板采用 `vue3.x` `vite3.2` `tsx` 进行开发，使用 `naive ui` 作为组件库。意在提供一个简洁、快速上手的模板。
+> 该项目模板采用 `vue3.x` `vite4.0` `tsx` 进行开发，使用 `naive ui` 作为组件库。意在提供一个简洁、快速上手的模板。
 
 ## 版本说明
 
@@ -169,7 +172,6 @@ npm run preview
 
 <!-- ALL-CONTRIBUTORS-LIST:END -->
 
-
 ## Contributors ✨
 
 Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
@@ -179,6 +181,7 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
 <!-- markdownlint-disable -->
 <!-- markdownlint-restore -->
 <!-- prettier-ignore-end -->
+
 <!-- ALL-CONTRIBUTORS-LIST:END -->
 
-This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!
+This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!

locales/system-one/en-US.json

@@ -0,0 +1,40 @@
+{
+  "GlobalMenuOptions": {
+    "Dashboard": "Home",
+    "Rely": "Rely",
+    "RelyAbout": "Rely About",
+    "Error": "Error Page",
+    "Echart": "Chart",
+    "scrollReveal": "Scroll Reveal",
+    "Axios": "Axios Request",
+    "Table": "Table",
+    "Doc": "Doc",
+    "DocLocal": "Doc (China)"
+  },
+  "LayoutHeaderTooltipOptions": {
+    "Reload": "Reload Current Page",
+    "Lock": "Lock",
+    "Setting": "Setting",
+    "Github": "Github",
+    "FullScreen": "Full Screen",
+    "CancelFullScreen": "Cancel Full Screen"
+  },
+  "LayoutHeaderSettingOptions": {
+    "Title": "Configuration",
+    "ThemeOptions": {
+      "Title": "Theme",
+      "Dark": "Dark",
+      "Light": "Light",
+      "PrimaryColorConfig": "Primary Color"
+    }
+  },
+  "LoginModule": {
+    "Register": "Register",
+    "Signin": "Signin",
+    "NamePlaceholder": "please enter user name",
+    "PasswordPlaceholder": "please enter password",
+    "Login": "Login",
+    "Name": "User Name",
+    "Password": "User Password"
+  }
+}

locales/system-one/zh-CN.json

@@ -0,0 +1,40 @@
+{
+  "GlobalMenuOptions": {
+    "Dashboard": "首页",
+    "Rely": "依赖项",
+    "RelyAbout": "关于",
+    "Error": "错误页",
+    "Echart": "可视化",
+    "scrollReveal": "滚动动画",
+    "Axios": "请求",
+    "Table": "表格",
+    "Doc": "文档",
+    "DocLocal": "文档 (国内地址)"
+  },
+  "LayoutHeaderTooltipOptions": {
+    "Reload": "刷新当前页面",
+    "Lock": "锁屏",
+    "Setting": "设置",
+    "Github": "Github",
+    "FullScreen": "全屏",
+    "CancelFullScreen": "退出全屏"
+  },
+  "LayoutHeaderSettingOptions": {
+    "Title": "项目配置",
+    "ThemeOptions": {
+      "Title": "主题",
+      "Dark": "暗色",
+      "Light": "明亮",
+      "PrimaryColorConfig": "主题色"
+    }
+  },
+  "LoginModule": {
+    "Register": "注册",
+    "Signin": "登陆",
+    "NamePlaceholder": "请输入用户名",
+    "PasswordPlaceholder": "请输入密码",
+    "Login": "登 陆",
+    "Name": "用户名",
+    "Password": "密码"
+  }
+}

locales/system-two/en-US.json

@@ -0,0 +1,40 @@
+{
+  "GlobalMenuOptions": {
+    "Dashboard": "Home",
+    "Rely": "Rely",
+    "RelyAbout": "Rely About",
+    "Error": "Error Page",
+    "Echart": "Chart",
+    "scrollReveal": "Scroll Reveal",
+    "Axios": "Axios Request",
+    "Table": "Table",
+    "Doc": "Doc",
+    "DocLocal": "Doc (China)"
+  },
+  "LayoutHeaderTooltipOptions": {
+    "Reload": "Reload Current Page",
+    "Lock": "Lock",
+    "Setting": "Setting",
+    "Github": "Github",
+    "FullScreen": "Full Screen",
+    "CancelFullScreen": "Cancel Full Screen"
+  },
+  "LayoutHeaderSettingOptions": {
+    "Title": "Configuration",
+    "ThemeOptions": {
+      "Title": "Theme",
+      "Dark": "Dark",
+      "Light": "Light",
+      "PrimaryColorConfig": "Primary Color"
+    }
+  },
+  "LoginModule": {
+    "Register": "Register",
+    "Signin": "Signin",
+    "NamePlaceholder": "please enter user name",
+    "PasswordPlaceholder": "please enter password",
+    "Login": "Login",
+    "Name": "User Name",
+    "Password": "User Password"
+  }
+}

locales/system-two/zh-CN.json

@@ -0,0 +1,40 @@
+{
+  "GlobalMenuOptions": {
+    "Dashboard": "首页",
+    "Rely": "依赖项",
+    "RelyAbout": "关于",
+    "Error": "错误页",
+    "Echart": "可视化",
+    "scrollReveal": "滚动动画",
+    "Axios": "请求",
+    "Table": "表格",
+    "Doc": "文档",
+    "DocLocal": "文档 (国内地址)"
+  },
+  "LayoutHeaderTooltipOptions": {
+    "Reload": "刷新当前页面",
+    "Lock": "锁屏",
+    "Setting": "设置",
+    "Github": "Github",
+    "FullScreen": "全屏",
+    "CancelFullScreen": "退出全屏"
+  },
+  "LayoutHeaderSettingOptions": {
+    "Title": "项目配置",
+    "ThemeOptions": {
+      "Title": "主题",
+      "Dark": "暗色",
+      "Light": "明亮",
+      "PrimaryColorConfig": "主题色"
+    }
+  },
+  "LoginModule": {
+    "Register": "注册",
+    "Signin": "登陆",
+    "NamePlaceholder": "请输入用户名",
+    "PasswordPlaceholder": "请输入密码",
+    "Login": "登 陆",
+    "Name": "用户名",
+    "Password": "密码"
+  }
+}

package.json

@@ -1,11 +1,11 @@
 {
   "name": "ray-template",
   "private": true,
-  "version": "3.0.8",
+  "version": "3.1.0",
   "type": "module",
   "scripts": {
     "dev": "vite",
-    "build": "vue-tsc --noEmit && vite build",
+    "build": "vue-tsc --noEmit && vite build --mode production",
     "preview": "vite preview",
     "test": "vue-tsc --noEmit && vite build --mode test",
     "dev-build": "vue-tsc --noEmit && vite build --mode development",
@@ -72,7 +72,7 @@
     "typescript": "*",
     "unplugin-auto-import": "^0.11.0",
     "unplugin-vue-components": "^0.22.0",
-    "vite": "^3.2.4",
+    "vite": "^4.1.4",
     "vite-plugin-compression": "^0.5.1",
     "vite-plugin-eslint": "^1.8.1",
     "vite-plugin-imp": "^2.3.1",

src/language/index.ts

@@ -9,15 +9,60 @@
  * @remark 今天也是元气满满撸代码的一天
  */
 
-import { createI18n } from 'vue-i18n'
-import messages from '@intlify/unplugin-vue-i18n/messages' // 导入所有语言包
-import { zhCN, dateZhCN } from 'naive-ui' // 导入 `naive ui` 中文包
-import { enUS, dateEnUS } from 'naive-ui' // 导入 `naive ui` 英文包
+/**
+ *
+ * 注册 `vue-i18n`
+ *
+ * 预设 `localeLanguage` 作为缓存 `key`
+ *
+ * 预设中文作为基础语言
+ *
+ * `naive ui` 语言包切换
+ *
+ * 注意:
+ *   - 因使用 `i18n` 提供虚拟文件注入缘故, 每次修改 `locales` 中的文件后, 需要重启项目
+ *   - 建议按照主流约定语言包命名
+ */
 
+import { createI18n } from 'vue-i18n'
+
+import { naiveLocales } from './language'
 import { getCache } from '@use-utils/cache'
 
+export { naiveLocales, localOptions } from './language'
+
 import type { App } from 'vue'
 
+/**
+ *
+ * @returns 整合后的语言包
+ *
+ * @remark 自动归并 locales 下所有 json 语言包, 需要注意语言包名称问题(必须统一)
+ * @remark 注意 key 的重复问题, 如果需要多模块区分语言包, 则需要保证 key 的唯一性, 否则会被覆盖
+ */
+export const getMatchLanguageModule = () => {
+  const msg = {}
+  const reg = /([^\\/]+)\.json$/i
+
+  try {
+    const modules = import.meta.glob('../../locales/**', {
+      eager: true,
+      as: 'raw',
+    })
+
+    const moduleKeys = Object.keys(modules)
+    moduleKeys.forEach((curr) => {
+      const k = curr.match(reg)?.[1] as string
+
+      msg[k] = Object.assign({}, JSON.parse(modules[curr]))
+    })
+  } catch (e) {
+    console.error(e)
+  }
+
+  return msg
+}
+
 /**
  *
  * @returns 获取当前环境默认语言
@@ -25,10 +70,9 @@ import type { App } from 'vue'
  * @remak 未避免出现加载语言错误问题, 故而在 `main.ts` 注册时, 应优先加载 `i18n` 避免出现该问题
  */
 export const getDefaultLocal = () => {
-  const locale: string =
-    getCache('localeLanguage', 'localStorage') !== 'no'
-      ? getCache('localeLanguage', 'localStorage')
-      : 'zh-CN'
+  const catchLanguage = getCache('localeLanguage', 'localStorage')
+
+  const locale: string = catchLanguage !== 'no' ? catchLanguage : 'zh-CN'
 
   return locale
 }
@@ -39,52 +83,12 @@ export const setupI18n = (app: App<Element>) => {
   const i18n = createI18n({
     locale,
     allowComposition: true,
-    messages,
+    messages: getMatchLanguageModule(),
   })
 
   app.use(i18n)
 }
 
-export const useLanguageOptions = () => [
-  {
-    key: 'zh-CN',
-    label: '中文(简体)',
-  },
-  {
-    key: 'en-US',
-    label: 'English(US)',
-  },
-]
-
-/**
- *
- * @param key 切换对应语言
- * @returns 组件库对应语言包
- *
- * @remark 受打包体积影响. 如果有新的语言添加, 则需要手动引入对应语言包(https://www.naiveui.com/zh-CN/dark/docs/i18n)
- */
-export const getNaiveLocal = (key: string) => {
-  switch (key) {
-    case 'zh-CN':
-      return {
-        local: zhCN,
-        dateLocal: dateZhCN,
-      }
-
-    case 'en-US':
-      return {
-        local: enUS,
-        dateLocal: dateEnUS,
-      }
-
-    default:
-      return {
-        local: zhCN,
-        dateLocal: dateZhCN,
-      }
-  }
-}
-
 /**
  *
  * @returns 当前环境语言组件库语言包
@@ -94,18 +98,5 @@ export const getNaiveLocal = (key: string) => {
 export const getDefaultNaiveLocal = () => {
   const local = getDefaultLocal()
 
-  return getNaiveLocal(local)
+  return naiveLocales(local)
 }
-
-/**
- *
- * 注册 `vue-i18n`
- *
- * 注意: 因使用 `i18n` 提供虚拟文件注入缘故, 每次修改 `locales` 中的文件后, 需要重启项目
- *
- * 预设 `localeLanguage` 作为缓存 `key`
- *
- * 预设中文作为基础语言
- *
- * `naive ui` 语言包切换
- */

src/language/language.ts

@@ -0,0 +1,54 @@
+/**
+ *
+ * @author Ray <https://github.com/XiaoDaiGua-Ray>
+ *
+ * @date 2023-03-01
+ *
+ * @workspace ray-template
+ *
+ * @remark 今天也是元气满满撸代码的一天
+ */
+
+import { zhCN, dateZhCN } from 'naive-ui' // 导入 `naive ui` 中文包
+import { enUS, dateEnUS } from 'naive-ui' // 导入 `naive ui` 英文包
+
+/** 语言包语种添加后, 需要在此文件配置语言包 */
+export const localOptions = [
+  {
+    key: 'zh-CN',
+    label: '中文(简体)',
+  },
+  {
+    key: 'en-US',
+    label: 'English(US)',
+  },
+]
+
+/**
+ *
+ * @param key 切换对应语言
+ * @returns 组件库对应语言包
+ *
+ * @remark 受打包体积影响. 如果有新的语言添加, 则需要手动引入对应语言包(https://www.naiveui.com/zh-CN/dark/docs/i18n)
+ */
+export const naiveLocales = (key: string) => {
+  switch (key) {
+    case 'zh-CN':
+      return {
+        local: zhCN,
+        dateLocal: dateZhCN,
+      }
+
+    case 'en-US':
+      return {
+        local: enUS,
+        dateLocal: dateEnUS,
+      }
+
+    default:
+      return {
+        local: zhCN,
+        dateLocal: dateZhCN,
+      }
+  }
+}

src/layout/components/SiderBar/index.tsx

@@ -17,7 +17,7 @@ import RayTooltipIcon from '@/components/RayTooltipIcon/index'
 import SettingDrawer from './components/SettingDrawer/index'
 
 import { useSetting } from '@/store'
-import { useLanguageOptions } from '@/language/index'
+import { localOptions } from '@/language/index'
 import { useAvatarOptions } from './hook'
 import { getCache } from '@/utils/cache'
 import screenfull from 'screenfull'
@@ -169,7 +169,7 @@ const SiderBar = defineComponent({
               />
             ))}
             <NDropdown
-              options={useLanguageOptions()}
+              options={localOptions}
               onSelect={(key: string | number) =>
                 this.updateLocale(String(key))
               }

src/store/modules/setting.ts

@@ -1,4 +1,4 @@
-import { getNaiveLocal, getDefaultNaiveLocal } from '@/language/index'
+import { naiveLocales, getDefaultNaiveLocal } from '@/language/index'
 
 export const useSetting = defineStore(
   'setting',
@@ -21,7 +21,7 @@ export const useSetting = defineStore(
     const updateLocale = (key: string) => {
       // TODO: 修改语言
       locale.value = key
-      settingState.naiveLocal = getNaiveLocal(key)
+      settingState.naiveLocal = naiveLocales(key)
     }
 
     const changePrimaryColor = (value: string) => {

src/views/login/index.tsx

@@ -12,7 +12,7 @@ import Signin from './components/Signin/index'
 import Register from './components/Register/index'
 import { useSetting } from '@/store'
 import RayIcon from '@/components/RayIcon'
-import { useLanguageOptions } from '@/language/index'
+import { localOptions } from '@/language/index'
 import RayLink from '@/components/RayLink/index'
 
 const Login = defineComponent({
@@ -41,7 +41,7 @@ const Login = defineComponent({
             Ray Template
           </NGradientText>
           <NDropdown
-            options={useLanguageOptions()}
+            options={localOptions}
             onSelect={(key) => this.updateLocale(key)}
           >
             <RayIcon customClassName="login-icon" name="language" size="18" />

tsconfig.node.json

@@ -12,6 +12,7 @@
     "vite-plugin/type.ts",
     "cfg.ts",
     "src/types/cfg.ts",
-    "package.json"
+    "package.json",
+    "vite-env.d.ts"
   ]
 }

vite-plugin/index.ts

@@ -98,66 +98,36 @@ export const HTMLTitlePlugin = (title: string) => {
  * @remark 打包输出文件配置
  */
 export const buildOptions = (mode: string): BuildOptions => {
-  switch (mode) {
-    case 'test':
-      return {
-        outDir: 'dist/test-dist',
-        sourcemap: true,
-        terserOptions: {
-          compress: {
-            drop_console: false,
-            drop_debugger: false,
-          },
-        },
-      }
+  const outDirMap = {
+    test: 'dist/test-dist',
+    development: 'dist/development-dist',
+    production: 'dist/production-dist',
+    report: 'dist/report-dist',
+  }
+  const dirPath = outDirMap[mode] || 'dist/test-dist'
 
-    case 'development':
-      return {
-        outDir: 'dist/development-dist',
-        sourcemap: true,
-        terserOptions: {
-          compress: {
-            drop_console: false,
-            drop_debugger: false,
-          },
+  if (mode === 'production') {
+    return {
+      outDir: dirPath,
+      sourcemap: false,
+      terserOptions: {
+        compress: {
+          drop_console: true,
+          drop_debugger: true,
         },
-      }
-
-    case 'production':
-      return {
-        outDir: 'dist/production-dist',
-        sourcemap: false,
-        terserOptions: {
-          compress: {
-            drop_console: true,
-            drop_debugger: true,
-          },
+      },
+    }
+  } else {
+    return {
+      outDir: dirPath,
+      sourcemap: true,
+      terserOptions: {
+        compress: {
+          drop_console: false,
+          drop_debugger: false,
         },
-      }
-
-    case 'report':
-      return {
-        outDir: 'dist/report-dist',
-        sourcemap: true,
-        terserOptions: {
-          compress: {
-            drop_console: false,
-            drop_debugger: false,
-          },
-        },
-      }
-
-    default:
-      return {
-        outDir: 'dist/test-dist',
-        sourcemap: false,
-        terserOptions: {
-          compress: {
-            drop_console: true, // 打包后移除 `console`
-            drop_debugger: true, // 打包后移除 `debugger`
-          },
-        },
-      }
+      },
+    }
   }
 }
 

vite.config.ts

@@ -118,6 +118,9 @@ export default defineConfig(async ({ mode }) => {
     optimizeDeps: {
       include: ['vue', 'vue-router', 'pinia', 'vue-i18n', '@vueuse/core'],
     },
+    esbuild: {
+      pure: ['console.log'],
+    },
     build: {
       ...buildOptions(mode),
       rollupOptions: {