lint-staged.config.js

@@ -1,8 +1,8 @@
-module.exports = {
+export default {
-	'*.{js,jsx,ts,tsx}': ['eslint --fix --no-ignore', 'prettier --write'],
+	"*.{js,jsx,ts,tsx}": ["eslint --fix", "prettier --write"],
-	'{!(package)*.json,*.code-snippets,.!(browserslist)*rc}': ['prettier --write--parser json'],
+	"{!(package)*.json,*.code-snippets,.!(browserslist)*rc}": ["prettier --write--parser json"],
-	'package.json': ['prettier --write'],
+	"package.json": ["prettier --write"],
-	'*.vue': ['eslint --fix --no-ignore', 'prettier --write', 'stylelint --fix'],
+	"*.vue": ["eslint --fix", "prettier --write", "stylelint --fix"],
-	'*.{scss,less,styl,html}': ['stylelint --fix --no-ignore', 'prettier --write'],
+	"*.{scss,less,styl,html}": ["stylelint --fix", "prettier --write"],
-	'*.md': ['prettier --write'],
+	"*.md": ["prettier --write"]
 };

package.json

@@ -26,7 +26,6 @@
 		"core-js": "^3.36.0",
 		"crypto-js": "^4.2.0",
 		"dayjs": "^1.11.10",
-		"dotenv": "^16.4.5",
 		"echarts": "^5.5.0",
 		"loadsh": "^0.0.4",
 		"mitt": "^3.0.1",

src/router/module/pageRoutes.ts

@@ -6,8 +6,8 @@ const routeMap: Record<string, RouteRecordRaw> = {};
 
 // * 所有处理的路由
 const contexts = [
-	{ context: import.meta.glob('@/views/**/index.vue', { eager: true, import: 'default' }), isIndex: true },
+	{ context: import.meta.glob("@/views/**/*.vue", { eager: true, import: "default", }), isIndex: true },
-	{ context: import.meta.glob('@/views/**/page.ts', { eager: true, import: 'default' }), isIndex: false },
+	{ context: import.meta.glob("@/views/**/page.ts", { eager: true, import: "default", }), isIndex: false },
 ];
 
 /**
@@ -22,11 +22,12 @@ const createRouteList = (context: any, isIndex: boolean) => {
 		const route: any = {
 			name: fileInfo?.name,
 			path: fileInfo!.path,
-			component: isIndex ? () => import(/* @vite-ignore */ fileInfo!.filePath, {}) : undefined,
+			component: isIndex ? () => import(fileInfo!.filePath) : undefined,
 		};
 		// 初始化赋值
 		if (isIndex) {
 			routeMap[route.path] = route;
+
 		} else {			
 			// 导出当前存在的路由并重新赋值
 			const existingRoute = routeMap[route.path];
@@ -34,10 +35,10 @@ const createRouteList = (context: any, isIndex: boolean) => {
 				routeMap[route.path] = { ...existingRoute, ...(exportRouteConfig as any) };
 			}
 		}
-	});
+	})
 };
 
 // * 生成路由信息
-contexts.forEach(({ context, isIndex }) => createRouteList(context, isIndex));
+contexts.forEach(({ context, isIndex }) => createRouteList(context, isIndex))
 
 export const pageRoutes: Array<RouteRecordRaw> = [...Object.values(routeMap)];

src/utils/file/routeFileUtil.ts

@@ -4,7 +4,7 @@
  * @param replaceValue 替换
  * @returns 文件转换对象
  */
-export const routeFilenameHelper = (filePath: string) => {
+export const routeFilenameHelper = (filePath: string, ) => {
 	// 匹配文件列表
 	const fileMatchList = filePath.match(/\/([^/]+)$/);
 
@@ -19,7 +19,8 @@ export const routeFilenameHelper = (filePath: string) => {
 		// 路径下划线名
 		const name = fullPath.replace(/\/(index|page)|^\//g, '').replace(/\//g, '_');
 		// 路径名不带文件名
-		const path = fullPath.replace(/\/[^/]*$/, '');
+		const path = fullPath.replace(/[^/]*$/, '');
-		return { fileExtension, filename, name, fullPath, path, filePath };
+		console.log(path);
+		return { fileExtension, filename, name, fullPath, path, filePath,  };
 	}
 };

src/utils/getEnv.ts

@@ -0,0 +1,84 @@
+import fs from "fs";
+import path from "path";
+import dotenv from "dotenv";
+
+export function isProdEnv(): boolean {
+	return import.meta.env.PROD;
+}
+
+export function isDevEnv(): boolean {
+	return import.meta.env.DEV;
+}
+
+export function isDevFn(mode: string): boolean {
+	return mode === "development";
+}
+
+export function isProdFn(mode: string): boolean {
+	return mode === "production";
+}
+
+/**
+ * Whether to generate package preview
+ */
+export function isReportMode(): boolean {
+	return process.env.VITE_REPORT === "true";
+}
+
+/**
+ * @description 读取所有环境变量配置文件到process.env
+ * @param envConf
+ * */
+export function wrapperEnv(envConf: Recordable): ViteEnv {
+	const ret: any = {};
+
+	for (const envName of Object.keys(envConf)) {
+		let realName = envConf[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;
+	}
+	return ret;
+}
+
+/**
+ * Get the environment variables starting with the specified prefix
+ * @param match prefix
+ * @param confFiles ext
+ */
+export function getEnvConfig(match = "VITE_GLOB_", confFiles = [".env", ".env.production"]) {
+	let envConfig = {};
+	confFiles.forEach(item => {
+		try {
+			const env = dotenv.parse(fs.readFileSync(path.resolve(process.cwd(), item)));
+			envConfig = { ...envConfig, ...env };
+		} catch (error) {
+			console.error(`Error in parsing ${item}`, error);
+		}
+	});
+
+	Object.keys(envConfig).forEach(key => {
+		const reg = new RegExp(`^(${match})`);
+		if (!reg.test(key)) {
+			Reflect.deleteProperty(envConfig, key);
+		}
+	});
+	return envConfig;
+}
+
+/**
+ * Get user root directory
+ * @param dir file path
+ */
+export function getRootPath(...dir: string[]) {
+	return path.resolve(process.cwd(), ...dir);
+}

src/vite-env.d.ts

@@ -1,14 +1 @@
 /// <reference types="vite/client" />
-
-interface ImportMetaEnv {
-	readonly VITE_GLOB_APP_TITLE: string; // 定义标题
-	readonly VITE_PORT: number; // 定义端口号
-	readonly VITE_OPEN: boolean; // 运行 npm run dev 时自动打开浏览器
-}
-
-declare module '*.vue' {
-	import type { DefineComponent } from 'vue';
-	// eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
-	const component: DefineComponent<{}, {}, any>;
-	export default component;
-}

vite.config.ts

@@ -1,51 +1,52 @@
 import vue from '@vitejs/plugin-vue';
-import { resolve } from 'path';
+import { resolve } from "path";
-import { UserConfig, defineConfig } from 'vite';
+import { ConfigEnv, UserConfig, defineConfig, loadEnv } from "vite";
+import { wrapperEnv } from "./src/utils/getEnv";
 
-export default defineConfig(
+export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
-	(): UserConfig => ({
+	const root = process.cwd();
+	const env = loadEnv(mode, root);
+	const viteEnv = wrapperEnv(env);
+
+	return {
 		resolve: {
 			alias: {
-				'@': resolve(__dirname, './src'),
+				"@": resolve(__dirname, "./src"),
-				'vue-i18n': 'vue-i18n/dist/vue-i18n.cjs.js',
+				"vue-i18n": "vue-i18n/dist/vue-i18n.cjs.js"
-			},
+			}
 		},
 		server: {
-			host: '0.0.0.0',
-			port: 6261,
-			open: true,
-			cors: true,
 			proxy: {
 				'/api': {
 					target: process.env.VUE_APP_URL,
 					changeOrigin: true,
-					rewrite: (path: string) => path.replace(/^\/api/, '/api'),
+					rewrite: (path: string) => path.replace(/^\/api/, "/api")
 				},
 				'/mock': {
 					target: process.env.VUE_APP_URL,
 					changeOrigin: true,
-					rewrite: (path: string) => path.replace(/^\/mock/, ''),
+					rewrite: (path: string) => path.replace(/^\/mock/, "")
 				},
-			},
+			}
 		},
-		plugins: [vue()],
+		plugins: [vue(),],
 		esbuild: {
-			pure: ['console.log', 'debugger'],
+			pure: viteEnv.VITE_DROP_CONSOLE ? ["console.log", "debugger"] : []
 		},
 		// 配置构建过程的选项，例如是否生成压缩文件和源映射
 		build: {
 			// 构建输出的目录，默认值为"dist"
-			outDir: 'dist',
+			outDir: "dist",
 			// 用于指定使用的代码压缩工具。在这里，minify 被设置为 'terser'，表示使用 Terser 进行代码压缩。默认值terser
 			// esbuild 打包更快，但是不能去除 console.log，terser打包慢，但能去除 console.log
-			minify: 'terser',
+			minify: "terser",
 			// 用于配置 Terser 的选项
 			terserOptions: {
 				// 用于配置压缩选项
 				compress: {
 					drop_console: true, // 是否删除代码中的 console 语句, 默认值false
-					drop_debugger: true, // 是否删除代码中的 debugger 语句, 默认值false
+					drop_debugger: true // 是否删除代码中的 debugger 语句, 默认值false
-				},
+				}
 			},
 			// 禁用 gzip 压缩大小报告，可略微减少打包时间
 			reportCompressedSize: false,
@@ -54,7 +55,7 @@ export default defineConfig(
 			// 用于配置 CommonJS 模块的选项
 			commonjsOptions: {
 				// 用于指定是否忽略 CommonJS 模块中的 try-catch 语句。当设置为false时，构建过程会保留 CommonJS 模块中的 try-catch 语句
-				ignoreTryCatch: false,
+				ignoreTryCatch: false
 			},
 			// 规定触发警告的 chunk 大小, 当某个代码分块的大小超过该限制时，Vite 会发出警告
 			chunkSizeWarningLimit: 2000,
@@ -63,11 +64,11 @@ export default defineConfig(
 				// 用于配置输出选项
 				output: {
 					// 静态资源分类和包装
-					chunkFileNames: 'assets/js/[name]-[hash].js', // 用于指定代码分块的输出文件名格式
+					chunkFileNames: "assets/js/[name]-[hash].js", // 用于指定代码分块的输出文件名格式
-					entryFileNames: 'assets/js/[name]-[hash].js', // 用于指定入口文件的输出文件名格式
+					entryFileNames: "assets/js/[name]-[hash].js", // 用于指定入口文件的输出文件名格式
-					assetFileNames: 'assets/[ext]/[name]-[hash].[ext]', // 用于指定静态资源的输出文件名格式
+					assetFileNames: "assets/[ext]/[name]-[hash].[ext]" // 用于指定静态资源的输出文件名格式
-				},
+				}
-			},
+			}
-		},
+		}
-	}),
+	}
-);
+});