fixbug: 🐛 路由显示问题和vue模板保持一致

lint-staged.config.js

@@ -1,8 +1,8 @@
-export default {
+module.exports = {
-	"*.{js,jsx,ts,tsx}": ["eslint --fix", "prettier --write"],
+	'*.{js,jsx,ts,tsx}': ['eslint --fix --no-ignore', '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", "prettier --write", "stylelint --fix"],
+	'*.vue': ['eslint --fix --no-ignore', 'prettier --write', 'stylelint --fix'],
-	"*.{scss,less,styl,html}": ["stylelint --fix", "prettier --write"],
+	'*.{scss,less,styl,html}': ['stylelint --fix --no-ignore', 'prettier --write'],
-	"*.md": ["prettier --write"]
+	'*.md': ['prettier --write'],
 };

package.json

@@ -26,6 +26,7 @@
 		"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/**/*.vue", { eager: true, import: "default", }), isIndex: true },
+	{ context: import.meta.glob('@/views/**/index.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,12 +22,11 @@ const createRouteList = (context: any, isIndex: boolean) => {
 		const route: any = {
 			name: fileInfo?.name,
 			path: fileInfo!.path,
-			component: isIndex ? () => import(fileInfo!.filePath) : undefined,
+			component: isIndex ? () => import(/* @vite-ignore */ fileInfo!.filePath, {}) : undefined,
 		};
 		// 初始化赋值
 		if (isIndex) {
 			routeMap[route.path] = route;
-
 		} else {
 			// 导出当前存在的路由并重新赋值
 			const existingRoute = routeMap[route.path];
@@ -35,10 +34,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,8 +19,7 @@ export const routeFilenameHelper = (filePath: string, ) => {
 		// 路径下划线名
 		const name = fullPath.replace(/\/(index|page)|^\//g, '').replace(/\//g, '_');
 		// 路径名不带文件名
-		const path = fullPath.replace(/[^/]*$/, '');
+		const path = fullPath.replace(/\/[^/]*$/, '');
-		console.log(path);
+		return { fileExtension, filename, name, fullPath, path, filePath };
-		return { fileExtension, filename, name, fullPath, path, filePath,  };
 	}
 };

src/utils/getEnv.ts

@@ -1,84 +0,0 @@
-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 +1,14 @@
 /// <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,52 +1,51 @@
 import vue from '@vitejs/plugin-vue';
-import { resolve } from "path";
+import { resolve } from 'path';
-import { ConfigEnv, UserConfig, defineConfig, loadEnv } from "vite";
+import { UserConfig, defineConfig } from 'vite';
-import { wrapperEnv } from "./src/utils/getEnv";
 
-export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
+export default defineConfig(
-	const root = process.cwd();
+	(): UserConfig => ({
-	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: viteEnv.VITE_DROP_CONSOLE ? ["console.log", "debugger"] : []
+			pure: ['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,
@@ -55,7 +54,7 @@ export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
 			// 用于配置 CommonJS 模块的选项
 			commonjsOptions: {
 				// 用于指定是否忽略 CommonJS 模块中的 try-catch 语句。当设置为false时，构建过程会保留 CommonJS 模块中的 try-catch 语句
-				ignoreTryCatch: false
+				ignoreTryCatch: false,
 			},
 			// 规定触发警告的 chunk 大小, 当某个代码分块的大小超过该限制时，Vite 会发出警告
 			chunkSizeWarningLimit: 2000,
@@ -64,11 +63,11 @@ export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
 				// 用于配置输出选项
 				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]', // 用于指定静态资源的输出文件名格式
-				}
+				},
-			}
+			},
-		}
+		},
-	}
+	}),
-});
+);