From 13db02c6c371f8b4ad0b59ee346313a934a3a979 Mon Sep 17 00:00:00 2001 From: ray_wuhao <443547225@qq.com> Date: Wed, 1 Mar 2023 14:45:52 +0800 Subject: [PATCH] =?UTF-8?q?3.1.0=E7=89=88=E6=9C=AC=E5=8F=91=E5=B8=83?= =?UTF-8?q?=EF=BC=8C=E6=94=AF=E6=8C=81=E6=A8=A1=E5=9D=97=E5=8C=96=E8=AF=AD?= =?UTF-8?q?=E8=A8=80=E5=8C=85=EF=BC=8C=E5=8D=87=E7=BA=A7vite=E7=89=88?= =?UTF-8?q?=E6=9C=AC=E4=B8=BA4.0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 9 +- locales/system-one/en-US.json | 40 ++++++++ locales/system-one/zh-CN.json | 40 ++++++++ locales/system-two/en-US.json | 40 ++++++++ locales/system-two/zh-CN.json | 40 ++++++++ package.json | 6 +- src/language/index.ts | 117 +++++++++++------------ src/language/language.ts | 54 +++++++++++ src/layout/components/SiderBar/index.tsx | 4 +- src/store/modules/setting.ts | 4 +- src/views/login/index.tsx | 4 +- tsconfig.node.json | 3 +- vite-plugin/index.ts | 84 ++++++---------- vite.config.ts | 3 + 14 files changed, 315 insertions(+), 133 deletions(-) create mode 100644 locales/system-one/en-US.json create mode 100644 locales/system-one/zh-CN.json create mode 100644 locales/system-two/en-US.json create mode 100644 locales/system-two/zh-CN.json create mode 100644 src/language/language.ts diff --git a/README.md b/README.md index 433f13d5..f3938e18 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,9 @@ # `Ray Template` + + [![All Contributors](https://img.shields.io/badge/all_contributors-1-orange.svg?style=flat-square)](#contributors-) + ## 感谢 @@ -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 - ## 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 + -This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome! \ No newline at end of file +This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome! diff --git a/locales/system-one/en-US.json b/locales/system-one/en-US.json new file mode 100644 index 00000000..48efddc9 --- /dev/null +++ b/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" + } +} diff --git a/locales/system-one/zh-CN.json b/locales/system-one/zh-CN.json new file mode 100644 index 00000000..87df69de --- /dev/null +++ b/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": "密码" + } +} diff --git a/locales/system-two/en-US.json b/locales/system-two/en-US.json new file mode 100644 index 00000000..48efddc9 --- /dev/null +++ b/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" + } +} diff --git a/locales/system-two/zh-CN.json b/locales/system-two/zh-CN.json new file mode 100644 index 00000000..87df69de --- /dev/null +++ b/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": "密码" + } +} diff --git a/package.json b/package.json index 5b187aa9..0884a817 100644 --- a/package.json +++ b/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", diff --git a/src/language/index.ts b/src/language/index.ts index 38589f1f..aa79b956 100644 --- a/src/language/index.ts +++ b/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) => { 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` 语言包切换 - */ diff --git a/src/language/language.ts b/src/language/language.ts new file mode 100644 index 00000000..64df2ed6 --- /dev/null +++ b/src/language/language.ts @@ -0,0 +1,54 @@ +/** + * + * @author 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, + } + } +} diff --git a/src/layout/components/SiderBar/index.tsx b/src/layout/components/SiderBar/index.tsx index 609ab07d..5b15e265 100644 --- a/src/layout/components/SiderBar/index.tsx +++ b/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({ /> ))} this.updateLocale(String(key)) } diff --git a/src/store/modules/setting.ts b/src/store/modules/setting.ts index 0d682b68..a5ac2572 100644 --- a/src/store/modules/setting.ts +++ b/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) => { diff --git a/src/views/login/index.tsx b/src/views/login/index.tsx index 597be825..260db9c7 100644 --- a/src/views/login/index.tsx +++ b/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 this.updateLocale(key)} > diff --git a/tsconfig.node.json b/tsconfig.node.json index ae2348f2..1ecfb322 100644 --- a/tsconfig.node.json +++ b/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" ] } diff --git a/vite-plugin/index.ts b/vite-plugin/index.ts index 53ede6ec..ce50701b 100644 --- a/vite-plugin/index.ts +++ b/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` - }, - }, - } + }, + } } } diff --git a/vite.config.ts b/vite.config.ts index 9f3853c3..755f54d6 100644 --- a/vite.config.ts +++ b/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: {