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

Merged
bunny merged 1 commits from dev into master 2024-05-08 14:19:33 +08:00
8 changed files with 15961 additions and 15830 deletions

View File

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

31598
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

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

View File

@ -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/**/page.ts", { eager: true, import: "default", }), isIndex: false },
{ 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 },
];
/**
@ -22,23 +22,22 @@ 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 {
} else {
// 导出当前存在的路由并重新赋值
const existingRoute = routeMap[route.path];
if (existingRoute) {
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)];
export const pageRoutes: Array<RouteRecordRaw> = [...Object.values(routeMap)];

View File

@ -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(/[^/]*$/, '');
console.log(path);
return { fileExtension, filename, name, fullPath, path, filePath, };
const path = fullPath.replace(/\/[^/]*$/, '');
return { fileExtension, filename, name, fullPath, path, filePath };
}
};

View File

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

13
src/vite-env.d.ts vendored
View File

@ -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;
}

View File

@ -1,52 +1,51 @@
import vue from '@vitejs/plugin-vue';
import { resolve } from "path";
import { ConfigEnv, UserConfig, defineConfig, loadEnv } from "vite";
import { wrapperEnv } from "./src/utils/getEnv";
import { resolve } from 'path';
import { UserConfig, defineConfig } from 'vite';
export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
const root = process.cwd();
const env = loadEnv(mode, root);
const viteEnv = wrapperEnv(env);
return {
export default defineConfig(
(): UserConfig => ({
resolve: {
alias: {
"@": resolve(__dirname, "./src"),
"vue-i18n": "vue-i18n/dist/vue-i18n.cjs.js"
}
'@': resolve(__dirname, './src'),
'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.logterser打包慢但能去除 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", // 用于指定代码分块的输出文件名格式
entryFileNames: "assets/js/[name]-[hash].js", // 用于指定入口文件的输出文件名格式
assetFileNames: "assets/[ext]/[name]-[hash].[ext]" // 用于指定静态资源的输出文件名格式
}
}
}
}
});
chunkFileNames: 'assets/js/[name]-[hash].js', // 用于指定代码分块的输出文件名格式
entryFileNames: 'assets/js/[name]-[hash].js', // 用于指定入口文件的输出文件名格式
assetFileNames: 'assets/[ext]/[name]-[hash].[ext]', // 用于指定静态资源的输出文件名格式
},
},
},
}),
);