chore: separate configuration files

.env

+# port
+VITE_PORT = 3100
+
+# spa-title
+VITE_GLOB_APP_TITLE = vben admin 2.0
+
+# spa shortname
+VITE_GLOB_APP_SHORT_NAME = vue_vben_admin_2x

.env.development

-VITE_USE_MOCK=true
+# Whether to open mock
+VITE_USE_MOCK = true
+
+# public path
+VITE_PUBLIC_PATH = /
+
+# Basic interface address SPA
+VITE_GLOB_API_URL=/api
+
+# Interface prefix
+VITE_GLOB_API_URL_PREFIX=
+
+# Cross-domain proxy, you can configure multiple
+VITE_PROXY=[["/api","http://localhost:3000"]]

.env.production

-VITE_USE_MOCK=true
+# Whether to open mock
+VITE_USE_MOCK = true
+
+# public path
+VITE_PUBLIC_PATH = ./
+
+# Basic interface address SPA
+VITE_GLOB_API_URL=/api
+
+# Interface prefix
+VITE_GLOB_API_URL_PREFIX=

.vscode/extensions.json

 {
   "recommendations": [
     "octref.vetur",
-    "dariofuzinato.vue-peek",
     "dbaeumer.vscode-eslint",
     "stylelint.vscode-stylelint",
     "DavidAnson.vscode-markdownlint",
     "esbenp.prettier-vscode",
     "mrmlnc.vscode-scss",
-    "Orta.vscode-jest"
+    "mrmlnc.vscode-less",
+    "cpylua.language-postcss",
+    "Orta.vscode-jest",
+    "antfu.iconify",
+    "mikestead.dotenv",
+    "bradlc.vscode-tailwindcss"
   ]
 }

README.md

@@ -111,7 +111,7 @@ git clone https://github.com/anncwb/vue-vben-admin.git vue-vben-admin-2.0
 
 cd vue-vben-admin-2.0
 
-// 如果使用别的包，可以执行安装
+// 如果使用别的包管理工具，可以自行安装
 // 如果未安装yarn，请运行：npm install -g yarn
 yarn install
 
@@ -174,7 +174,7 @@ yarn clean:lib # 删除node_modules，兼容window系统
   - `workflow` 工作流改进
   - `ci` 持续集成
   - `types` 类型定义文件更改
-  - `wip` 删除文件
+  - `wip` 开发中
 
 ## 代码贡献
 
@@ -212,10 +212,8 @@ yarn clean:lib # 删除node_modules，兼容window系统
 - [x] 二维码插件
 - [x] 国际化插件
 - [x] 详情组件
-- [x] 图片裁剪
 - [x] 验证码/验证组件
 - [x] 树组件
-- [x] 系统性能优化
 - [x] 兼容最新`vuex`,`vue-router`
 - [x] 图片预览组件
 - [x] 表格组件
@@ -234,6 +232,7 @@ yarn clean:lib # 删除node_modules，兼容window系统
 - [ ] 黑暗主题
 - [ ] 打包 Gzip
 - [ ] 抽取生产环境配置文件
+- [ ] 系统性能优化
 
 更多组件/功能/建议/bug/欢迎提交 pr 或者 issue
 

build/utils.ts

 import fs from 'fs';
 import { networkInterfaces } from 'os';
 import dotenv from 'dotenv';
-
 export const isFunction = (arg: unknown): arg is (...args: any[]) => any =>
   typeof arg === 'function';
 export const isRegExp = (arg: unknown): arg is RegExp =>
@@ -68,7 +67,14 @@ export function isReportMode(): boolean {
   return process.env.REPORT === 'true';
 }
 
-export function loadEnv() {
+export interface ViteEnv {
+  VITE_PORT: number;
+  VITE_USE_MOCK: boolean;
+  VITE_PUBLIC_PATH: string;
+  VITE_PROXY: [string, string][];
+}
+
+export function loadEnv(): ViteEnv {
   const env = process.env.NODE_ENV;
   const ret: any = {};
   const envList = [`.env.${env}.local`, `.env.${env}`, '.env.local', '.env', ,];
@@ -79,7 +85,16 @@ export function loadEnv() {
   });
 
   for (const envName of Object.keys(process.env)) {
-    const realName = (process.env as any)[envName].replace(/\\n/g, '\n');
+    let realName = (process.env as any)[envName].replace(/\\n/g, '\n');
+    realName = realName === 'true' ? true : realName === 'false' ? false : realName;
+    if (envName === 'VITE_PORT') {
+      realName = Number(realName);
+    }
+    if (envName === 'VITE_PROXY') {
+      try {
+        realName = JSON.parse(realName);
+      } catch (error) {}
+    }
     ret[envName] = realName;
     process.env[envName] = realName;
   }

getEnvConfig.ts

+import type { GlobEnvConfig } from './src/types/config';
+
+export const getGlobEnvConfig = (): GlobEnvConfig => {
+  const env = import.meta.env;
+  return (env as unknown) as GlobEnvConfig;
+};

package.json

@@ -82,7 +82,7 @@
     "stylelint-config-prettier": "^8.0.2",
     "stylelint-config-standard": "^20.0.0",
     "stylelint-order": "^4.1.0",
-    "tailwindcss": "^1.8.10",
+    "tailwindcss": "^1.8.13",
     "tasksfile": "^5.1.1",
     "ts-node": "^9.0.0",
     "typescript": "^4.0.3",

src/hooks/core/useSetting.ts

@@ -2,13 +2,21 @@ import type { ProjectConfig, GlobConfig, SettingWrap } from '/@/types/config';
 
 import getProjectSetting from '/@/settings/projectSetting';
 
+import { getGlobEnvConfig } from '../../../getEnvConfig';
+const {
+  VITE_GLOB_API_URL,
+  VITE_GLOB_APP_SHORT_NAME,
+  VITE_GLOB_APP_TITLE,
+  VITE_GLOB_API_URL_PREFIX,
+} = getGlobEnvConfig();
+
 export const useSetting = (): SettingWrap => {
   // Take global configuration
   const glob: Readonly<GlobConfig> = {
-    title: 'vben admin 2.0',
-    apiUrl: '/api',
-    shortName: 'vben_admin_v2',
-    urlPrefix: '',
+    title: VITE_GLOB_APP_TITLE,
+    apiUrl: VITE_GLOB_API_URL,
+    shortName: VITE_GLOB_APP_SHORT_NAME,
+    urlPrefix: VITE_GLOB_API_URL_PREFIX,
   };
   const projectSetting: Readonly<ProjectConfig> = getProjectSetting;
 

src/types/config.d.ts

@@ -117,14 +117,14 @@ export interface GlobConfig {
 }
 export interface GlobEnvConfig {
   // 网站标题
-  GLOB_APP_TITLE: string;
+  VITE_GLOB_APP_TITLE: string;
 
   // 项目路径
-  GLOB_API_URL: string;
+  VITE_GLOB_API_URL: string;
 
-  GLOB_API_URL_PREFIX?: string;
+  VITE_GLOB_API_URL_PREFIX?: string;
 
-  GLOB_APP_SHORT_NAME: string;
+  VITE_GLOB_APP_SHORT_NAME: string;
 }
 
 //  修改配置

vite.config.ts

 import { resolve } from 'path';
 
 import type { UserConfig, Plugin as VitePlugin } from 'vite';
-import type { Plugin } from 'rollup';
 
 import visualizer from 'rollup-plugin-visualizer';
 import { modifyVars } from './build/config/glob/lessModifyVars';
@@ -12,12 +11,13 @@ import PurgeIcons from 'vite-plugin-purge-icons';
 import { isDevFn, isReportMode, isProdFn, loadEnv } from './build/utils';
 
 setupBasicEnv();
-const { VITE_USE_MOCK } = loadEnv();
+const { VITE_USE_MOCK, VITE_PORT, VITE_PUBLIC_PATH, VITE_PROXY } = loadEnv();
 
 function pathResolve(dir: string) {
   return resolve(__dirname, '.', dir);
 }
-const rollupPlugins: Plugin[] = [];
+
+const rollupPlugins: any[] = [];
 const vitePlugins: VitePlugin[] = [];
 
 (() => {
@@ -27,7 +27,7 @@ const vitePlugins: VitePlugin[] = [];
       visualizer({ filename: './node_modules/.cache/stats.html', open: true }) as Plugin
     );
   }
-  if (isDevFn() && VITE_USE_MOCK === 'true') {
+  if (isDevFn() && VITE_USE_MOCK) {
     // open mock
     vitePlugins.push(
       createMockServer({
@@ -39,18 +39,17 @@ const vitePlugins: VitePlugin[] = [];
 })();
 
 const viteConfig: UserConfig = {
-  silent: false,
+  /**
+   * 端口号
+   * @default '3000'
+   */
+  port: VITE_PORT,
   /**
    * 服务地址
    * @default 'localhost'
    */
   hostname: 'localhost',
   /**
-   * 端口号
-   * @default '3000'
-   */
-  port: 3100,
-  /**
    * 运行自动打开浏览器·
    * @default 'false'
    */
@@ -62,10 +61,10 @@ const viteConfig: UserConfig = {
    */
   minify: isDevFn() ? false : 'terser',
   /**
-   * 在生产中投放时提供基本公共路径
+   * 基本公共路径
    * @default '/'
    */
-  base: isDevFn() ? '/' : './',
+  base: VITE_PUBLIC_PATH,
 
   /**
    * 打包输入路径
@@ -91,7 +90,7 @@ const viteConfig: UserConfig = {
    * @default 'es2019'
    */
   esbuildTarget: 'es2019',
-
+  silent: false,
   // 别名
   alias: {
     '/@/': pathResolve('src'),
@@ -112,7 +111,7 @@ const viteConfig: UserConfig = {
     include: ['ant-design-vue/es/locale/zh_CN', '@ant-design/icons-vue', 'moment/locale/zh-cn'],
   },
   // 本地跨域代理
-  proxy: createProxy([['/api', 'http://localhost:3000']]),
+  proxy: createProxy(VITE_PROXY),
 
   plugins: [PurgeIcons(), ...vitePlugins],
   rollupOutputOptions: {},

yarn.lock

@@ -6478,10 +6478,10 @@ table@^6.0.1:
     slice-ansi "^4.0.0"
     string-width "^4.2.0"
 
-tailwindcss@^1.8.10:
-  version "1.8.10"
-  resolved "https://registry.npm.taobao.org/tailwindcss/download/tailwindcss-1.8.10.tgz#945ef151c401c04a1c95e6a6bc747387a8d1b9dc"
-  integrity sha1-lF7xUcQBwEocleamvHRzh6jRudw=
+tailwindcss@^1.8.13:
+  version "1.8.13"
+  resolved "https://registry.npmjs.org/tailwindcss/-/tailwindcss-1.8.13.tgz#ee57050a516d342bafc92cb74b4de6f92e44c189"
+  integrity sha512-z3R/6qPqfjauSR4qHhlA8I0OnfSyuotvigXISq666k+V52VSs5HV//KZ0Xe3qrZ4h5Um4OG5g+lcgjXSfURjDw==
   dependencies:
     "@fullhuman/postcss-purgecss" "^2.1.2"
     autoprefixer "^9.4.5"