build(projects): vite.config代码优化

.env

@@ -6,4 +6,7 @@ VITE_APP_TITLE=Soybean管理系统
 
 VITE_APP_DESC=SoybeanAdmin是一个中后台管理系统模版
 
+VITE_SERVER_PORT=3200
+
 VITE_HTTP_PROXY=true
+

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。

build/define/index.ts → 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,
 };

build/config/index.ts

@@ -0,0 +1,3 @@
+export * from './path';
+export * from './define';
+export * from './proxy';

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,
+  };
+}

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<string, string | ProxyOptions> = {
+    [http.proxy]: {
+      target: http.url,
+      changeOrigin: true,
+      rewrite: (path) => path.replace(new RegExp(`^${http.proxy}`), ''),
+    },
+  };
+
+  return proxy;
+}

build/index.ts

@@ -1,2 +1,2 @@
 export * from './plugins';
-export * from './define';
+export * from './config';

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}`);

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'];

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",

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;
   /** 开启请求代理 */

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,
     },
   };
 });