From ca707a456b2b643119c0af173fa9a114df9162a8 Mon Sep 17 00:00:00 2001 From: Soybean Date: Sun, 13 Mar 2022 16:47:19 +0800 Subject: [PATCH] =?UTF-8?q?build(projects):=20vite.config=E4=BB=A3?= =?UTF-8?q?=E7=A0=81=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .env | 3 ++ README.md | 6 ++++ build/{define/index.ts => config/define.ts} | 2 +- build/config/index.ts | 3 ++ build/config/path.ts | 15 ++++++++++ build/config/proxy.ts | 23 +++++++++++++++ build/index.ts | 2 +- build/plugins/html.ts | 2 +- components.d.ts | 25 ---------------- package.json | 1 + pnpm-lock.yaml | 30 +++++++++++++++++++ src/typings/env.d.ts | 2 ++ vite.config.ts | 32 ++++++--------------- 13 files changed, 94 insertions(+), 52 deletions(-) rename build/{define/index.ts => config/define.ts} (85%) create mode 100644 build/config/index.ts create mode 100644 build/config/path.ts create mode 100644 build/config/proxy.ts diff --git a/.env b/.env index e79db2f20..e728fe4e4 100644 --- a/.env +++ b/.env @@ -6,4 +6,7 @@ VITE_APP_TITLE=Soybean管理系统 VITE_APP_DESC=SoybeanAdmin是一个中后台管理系统模版 +VITE_SERVER_PORT=3200 + VITE_HTTP_PROXY=true + diff --git a/README.md b/README.md index f7957b30b..fac81dfd4 100644 --- a/README.md +++ b/README.md @@ -87,6 +87,12 @@ pnpm dev pnpm build ``` +::: warning 注意 + +本地环境需要安装 pnpm 6.x 、Node.js 14.x 和 Git + +::: + ## 如何贡献 非常欢迎您的加入！[提一个 Issue](https://github.com/honghuangdc/soybean-admin/issues/new) 或者提交一个 Pull Request。 diff --git a/build/define/index.ts b/build/config/define.ts similarity index 85% rename from build/define/index.ts rename to build/config/define.ts index a4117dd4c..2e4b323f3 100644 --- a/build/define/index.ts +++ b/build/config/define.ts @@ -3,6 +3,6 @@ import dayjs from 'dayjs'; /** 项目构建时间 */ const PROJECT_BUILD_TIME = JSON.stringify(dayjs().format('YYYY-MM-DD HH:mm:ss')); -export const define = { +export const viteDefine = { PROJECT_BUILD_TIME, }; diff --git a/build/config/index.ts b/build/config/index.ts new file mode 100644 index 000000000..9e6a96809 --- /dev/null +++ b/build/config/index.ts @@ -0,0 +1,3 @@ +export * from './path'; +export * from './define'; +export * from './proxy'; diff --git a/build/config/path.ts b/build/config/path.ts new file mode 100644 index 000000000..854509b14 --- /dev/null +++ b/build/config/path.ts @@ -0,0 +1,15 @@ +import { fileURLToPath } from 'url'; + +/** + * 解析路径 + * @param basePath - 基础路径 + */ +export function resolvePath(rootPath: string, basePath: string) { + const root = fileURLToPath(new URL(rootPath, basePath)); + const src = `${root}src`; + + return { + root, + src, + }; +} diff --git a/build/config/proxy.ts b/build/config/proxy.ts new file mode 100644 index 000000000..7034efa25 --- /dev/null +++ b/build/config/proxy.ts @@ -0,0 +1,23 @@ +import type { ProxyOptions } from 'vite'; +import { getEnvConfig } from '../../.env-config'; + +/** + * 设置网络代理 + * @param viteEnv + */ +export function createViteProxy(viteEnv: ImportMetaEnv) { + const isOpenProxy = viteEnv.VITE_HTTP_PROXY === 'true'; + if (!isOpenProxy) return undefined; + + const { http } = getEnvConfig(viteEnv); + + const proxy: Record = { + [http.proxy]: { + target: http.url, + changeOrigin: true, + rewrite: (path) => path.replace(new RegExp(`^${http.proxy}`), ''), + }, + }; + + return proxy; +} diff --git a/build/index.ts b/build/index.ts index e81a1951e..0e8f2afd3 100644 --- a/build/index.ts +++ b/build/index.ts @@ -1,2 +1,2 @@ export * from './plugins'; -export * from './define'; +export * from './config'; diff --git a/build/plugins/html.ts b/build/plugins/html.ts index 111182072..d50dce806 100644 --- a/build/plugins/html.ts +++ b/build/plugins/html.ts @@ -1,6 +1,6 @@ import { loadEnv } from 'vite'; import type { ConfigEnv, PluginOption } from 'vite'; -import { createHtmlPlugin } from 'vite-plugin-html'; // html插件(使用变量、压缩) +import { createHtmlPlugin } from 'vite-plugin-html'; export default (config: ConfigEnv): PluginOption[] => { const viteEnv = loadEnv(config.mode, `.env.${config.mode}`); diff --git a/components.d.ts b/components.d.ts index 68db97538..893c71f7d 100644 --- a/components.d.ts +++ b/components.d.ts @@ -10,32 +10,7 @@ declare module 'vue' { DarkModeSwitch: typeof import('./src/components/common/DarkModeSwitch.vue')['default']; GithubLink: typeof import('./src/components/custom/GithubLink.vue')['default']; HoverContainer: typeof import('./src/components/common/HoverContainer.vue')['default']; - IconAntDesignCloseOutlined: typeof import('~icons/ant-design/close-outlined')['default']; - IconAntDesignEnterOutlined: typeof import('~icons/ant-design/enter-outlined')['default']; - IconAntDesignSettingOutlined: typeof import('~icons/ant-design/setting-outlined')['default']; - IconCustomActivity: typeof import('~icons/custom/activity')['default']; - IconCustomAvatar: typeof import('~icons/custom/avatar')['default']; - IconCustomCast: typeof import('~icons/custom/cast')['default']; - IconCustomLogo: typeof import('~icons/custom/logo')['default']; - IconCustomLogoFill: typeof import('~icons/custom/logo-fill')['default']; - IconGridiconsFullscreen: typeof import('~icons/gridicons/fullscreen')['default']; - IconGridiconsFullscreenExit: typeof import('~icons/gridicons/fullscreen-exit')['default']; - IconIcOutlineCheck: typeof import('~icons/ic/outline-check')['default']; - IconLineMdMenuFoldLeft: typeof import('~icons/line-md/menu-fold-left')['default']; - IconLineMdMenuUnfoldLeft: typeof import('~icons/line-md/menu-unfold-left')['default']; - IconMdiArrowDownThin: typeof import('~icons/mdi/arrow-down-thin')['default']; - IconMdiArrowUpThin: typeof import('~icons/mdi/arrow-up-thin')['default']; - IconMdiClose: typeof import('~icons/mdi/close')['default']; - IconMdiGithub: typeof import('~icons/mdi/github')['default']; - IconMdiMoonWaningCrescent: typeof import('~icons/mdi/moon-waning-crescent')['default']; - IconMdiPin: typeof import('~icons/mdi/pin')['default']; - IconMdiPinOff: typeof import('~icons/mdi/pin-off')['default']; - IconMdiRefresh: typeof import('~icons/mdi/refresh')['default']; - IconMdiWhiteBalanceSunny: typeof import('~icons/mdi/white-balance-sunny')['default']; - IconPhCaretDoubleLeftBold: typeof import('~icons/ph/caret-double-left-bold')['default']; - IconPhCaretDoubleRightBold: typeof import('~icons/ph/caret-double-right-bold')['default']; IconSelect: typeof import('./src/components/custom/IconSelect.vue')['default']; - IconUilSearch: typeof import('~icons/uil/search')['default']; ImageVerify: typeof import('./src/components/custom/ImageVerify.vue')['default']; LoadingEmptyWrapper: typeof import('./src/components/business/LoadingEmptyWrapper.vue')['default']; LoginAgreement: typeof import('./src/components/business/LoginAgreement.vue')['default']; diff --git a/package.json b/package.json index 8e836d34d..22227a5c2 100644 --- a/package.json +++ b/package.json @@ -90,6 +90,7 @@ "unplugin-vue-components": "^0.18.0", "vite": "2.8.6", "vite-plugin-html": "^3.1.0", + "vite-plugin-html-template": "^1.1.2", "vite-plugin-mock": "^2.9.6", "vite-plugin-windicss": "^1.8.3", "vue-tsc": "^0.32.1", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 2eab7f21e..94fa19c51 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -59,6 +59,7 @@ specifiers: vditor: ^3.8.12 vite: 2.8.6 vite-plugin-html: ^3.1.0 + vite-plugin-html-template: ^1.1.2 vite-plugin-mock: ^2.9.6 vite-plugin-windicss: ^1.8.3 vue: ^3.2.31 @@ -134,6 +135,7 @@ devDependencies: unplugin-vue-components: 0.18.0_vite@2.8.6+vue@3.2.31 vite: 2.8.6_sass@1.49.9 vite-plugin-html: 3.1.0_vite@2.8.6 + vite-plugin-html-template: 1.1.2 vite-plugin-mock: registry.npmmirror.com/vite-plugin-mock/2.9.6_mockjs@1.1.0+vite@2.8.6 vite-plugin-windicss: 1.8.3_vite@2.8.6 vue-tsc: 0.32.1_typescript@4.6.2 @@ -2291,6 +2293,11 @@ packages: side-channel: 1.0.4 dev: false + /interpret/1.4.0: + resolution: {integrity: sha512-agE4QfB2Lkp9uICn7BAqoscw4SZP9kTE2hxiFI3jBPmXJfdqiahTbUuKGsMoN2GtqL9AxhYioAcVvgsb1HvRbA==} + engines: {node: '>= 0.10'} + dev: true + /is-arguments/1.1.1: resolution: {integrity: sha512-8Q7EARjzEnKpt/PCD7e1cgUS0a6X8u5tdSiMqXhojOdoV9TsMsiO+9VLC5vAmO8N7/GmXn7yjR8qnA6bVAEzfA==} engines: {node: '>= 0.4'} @@ -3083,6 +3090,13 @@ packages: picomatch: 2.3.0 dev: true + /rechoir/0.6.2: + resolution: {integrity: sha1-hSBLVNuoLVdC4oyWdW70OvUOM4Q=} + engines: {node: '>= 0.10'} + dependencies: + resolve: 1.22.0 + dev: true + /regenerator-runtime/0.13.9: resolution: {integrity: sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==} dev: false @@ -3262,6 +3276,16 @@ packages: engines: {node: '>=8'} dev: true + /shelljs/0.8.4: + resolution: {integrity: sha512-7gk3UZ9kOfPLIAbslLzyWeGiEqx9e3rxwZM0KE6EL8GlGwjym9Mrlx5/p33bWTu9YG6vcS4MBxYZDHYr5lr8BQ==} + engines: {node: '>=4'} + hasBin: true + dependencies: + glob: 7.2.0 + interpret: 1.4.0 + rechoir: 0.6.2 + dev: true + /side-channel/1.0.4: resolution: {integrity: sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==} dependencies: @@ -3777,6 +3801,12 @@ packages: resolution: {integrity: sha512-nguyw8L6Un8eelg1vQ31vIU2ESxqid7EYmy8V+MDeMaHBqaRSkg3dTBToC1PR00D89UzS/SLkfYPnx0Wf23IQQ==} dev: false + /vite-plugin-html-template/1.1.2: + resolution: {integrity: sha512-R5pZ1VXph6K6HI7DZEJABn2Ex7DRYvPBNWtw2yr1KkY/BS6zYfzrqyf+W1Gukvjtg3Nx3evE06gVxud0jIx+yw==} + dependencies: + shelljs: 0.8.4 + dev: true + /vite-plugin-html/3.1.0_vite@2.8.6: resolution: {integrity: sha512-ig2XPSSeqG23/k7EQhIh0Pt1Fbm1V75G/qKnZDA3oIqKjIMaA1mF4Otmc2W2ru3AlBuuv5dFv+NQnO+i9QsK2w==} peerDependencies: diff --git a/src/typings/env.d.ts b/src/typings/env.d.ts index bde3033f2..5cf7ab8ad 100644 --- a/src/typings/env.d.ts +++ b/src/typings/env.d.ts @@ -19,6 +19,8 @@ interface ImportMetaEnv { readonly VITE_APP_TITLE: string; /** 项目描述 */ readonly VITE_APP_DESC: string; + /** 开发启动的服务端口号 */ + readonly VITE_SERVER_PORT: string; /** vite环境类型 */ readonly VITE_ENV_TYPE?: EnvType; /** 开启请求代理 */ diff --git a/vite.config.ts b/vite.config.ts index 0079d0488..bff734bb0 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -1,26 +1,20 @@ -import { fileURLToPath } from 'url'; import { defineConfig, loadEnv } from 'vite'; -import { setupVitePlugins, define } from './build'; -import { getEnvConfig } from './.env-config'; +import { resolvePath, viteDefine, setupVitePlugins, createViteProxy } from './build'; export default defineConfig((configEnv) => { const viteEnv = loadEnv(configEnv.mode, `.env.${configEnv.mode}`) as ImportMetaEnv; - - const srcPath = fileURLToPath(new URL('./src', import.meta.url)); - const rootPath = fileURLToPath(new URL('./', import.meta.url)); - - const { http } = getEnvConfig(viteEnv); + const vitePath = resolvePath('./', import.meta.url); return { base: viteEnv.VITE_BASE_URL, resolve: { alias: { - '@': srcPath, - '~/': rootPath, + '~/': vitePath.root, + '@': vitePath.src, }, }, - define, - plugins: setupVitePlugins(configEnv, srcPath, viteEnv), + define: viteDefine, + plugins: setupVitePlugins(configEnv, vitePath.src, viteEnv), css: { preprocessorOptions: { scss: { @@ -29,23 +23,13 @@ export default defineConfig((configEnv) => { }, }, server: { - fs: { - strict: false, - }, host: '0.0.0.0', - port: 3200, + port: Number(viteEnv.VITE_SERVER_PORT), open: true, - proxy: { - [http.proxy]: { - target: http.url, - changeOrigin: true, - rewrite: (path) => path.replace(new RegExp(`^${http.proxy}`), ''), - }, - }, + proxy: createViteProxy(viteEnv), }, build: { brotliSize: false, - sourcemap: false, }, }; });