diff --git a/.prettierrc.cjs b/.prettierrc.cjs index ae0de13..96a40ad 100644 --- a/.prettierrc.cjs +++ b/.prettierrc.cjs @@ -37,5 +37,5 @@ module.exports = { endOfLine: "auto", // 这两个选项可用于格式化以给定字符偏移量（分别包括和不包括）开始和结束的代码 (rangeStart：开始，rangeEnd：结束) rangeStart: 0, - rangeEnd: Infinity, + rangeEnd: Infinity }; diff --git a/build/vite-plugin.ts b/build/vite-plugin.ts new file mode 100644 index 0000000..e86d852 --- /dev/null +++ b/build/vite-plugin.ts @@ -0,0 +1,80 @@ +import vue from "@vitejs/plugin-vue"; +import path from "path"; +import { PluginOption } from "vite"; +import eslintPlugin from "vite-plugin-eslint"; +import { vitePluginForArco } from "@arco-plugins/vite-vue"; +import { createHtmlPlugin } from "vite-plugin-html"; +import { createSvgIconsPlugin } from "vite-plugin-svg-icons"; +import AutoImport from "unplugin-auto-import/vite"; +import { ArcoResolver } from "unplugin-vue-components/resolvers"; +import Components from "unplugin-vue-components/vite"; +import { viteMockServe } from "vite-plugin-mock"; +/** + * 创建 vite 插件 + * @param viteEnv + */ +export const createVitePlugins = (viteEnv: ViteEnv): (PluginOption | PluginOption[])[] => { + const env = viteEnv; + return [ + vue(), + // esLint 报错信息显示在浏览器界面上 + eslintPlugin(), + vitePluginForArco({ + style: "css" + }), + // 提供ejs模板能力，用于index.html的标题显示 + createHtmlPlugin({ + inject: { + data: { + title: env.VITE_GLOB_APP_TITLE + } + } + }), + createSvgIconsPlugin({ + // 配置src下存放svg的路径，这里表示在src/assets/svgs文件夹下 + iconDirs: [path.resolve(process.cwd(), "src/assets/svgs")], + symbolId: "icon-[dir]-[name]" + }), + AutoImport({ + // 自动导入 Vue 相关函数，如：ref, reactive, toRef 等 + imports: ["vue", "vue-router"], + // arco组件的按需加载 + resolvers: [ArcoResolver()], + // 解决eslint报错问题 + eslintrc: { + // 这里先设置成true然后npm run dev 运行之后会生成 .eslintrc-auto-import.json 文件之后，在改为false + enabled: false, + filepath: "./.eslintrc-auto-import.json", // 生成的文件路径 + globalsPropValue: true + }, + // 配置文件生成位置 + dts: "src/auto-import.d.ts" + }), + Components({ + resolvers: [ + // arco组件的按需加载 + ArcoResolver({ + sideEffect: true + }) + ], + // 自动加载组件的目录配置,默认的为 'src/components' + dirs: ["src/components"], + // 组件的有效文件扩展名 + extensions: ["vue"], + // 配置文件生成位置 + dts: "src/components.d.ts" + }), + viteMockServe({ + mockPath: "./src/mock/", // 目录位置 + logger: true, // 是否在控制台显示请求日志 + supportTs: true, // 是否读取ts文件模块 + localEnabled: env.VITE_APP_OPEN_MOCK === "true", // 设置是否启用本地mock文件 + prodEnabled: env.VITE_APP_OPEN_MOCK === "true", // 设置打包是否启用mock功能 + // 这样可以控制关闭mock的时候不让mock打包到最终代码内 + injectCode: ` + import { setupProdMockServer } from '../src/mock/index'; + setupProdMockServer(); + ` + }) + ]; +}; diff --git a/package.json b/package.json index a8f918f..aba3b02 100644 --- a/package.json +++ b/package.json @@ -80,6 +80,7 @@ "unplugin-auto-import": "^0.17.5", "unplugin-vue-components": "^0.26.0", "vite": "^5.2.0", + "vite-plugin-eslint": "^1.8.1", "vite-plugin-html": "^3.2.2", "vite-plugin-mock": "^2.9.6", "vite-plugin-svg-icons": "^2.0.1", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index f4c77b6..ad9241f 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -119,7 +119,7 @@ importers: version: 9.1.0(eslint@8.57.0) eslint-plugin-prettier: specifier: ^5.1.3 - version: 5.1.3(eslint-config-prettier@9.1.0(eslint@8.57.0))(eslint@8.57.0)(prettier@3.2.5) + version: 5.1.3(@types/eslint@8.56.12)(eslint-config-prettier@9.1.0(eslint@8.57.0))(eslint@8.57.0)(prettier@3.2.5) eslint-plugin-vue: specifier: ^9.23.0 version: 9.23.0(eslint@8.57.0) @@ -168,6 +168,9 @@ importers: vite: specifier: ^5.2.0 version: 5.2.2(@types/node@20.11.30)(sass@1.72.0)(terser@5.29.2) + vite-plugin-eslint: + specifier: ^1.8.1 + version: 1.8.1(eslint@8.57.0)(vite@5.2.2(@types/node@20.11.30)(sass@1.72.0)(terser@5.29.2)) vite-plugin-html: specifier: ^3.2.2 version: 3.2.2(vite@5.2.2(@types/node@20.11.30)(sass@1.72.0)(terser@5.29.2)) @@ -1058,6 +1061,9 @@ packages: '@types/conventional-commits-parser@5.0.0': resolution: {integrity: sha512-loB369iXNmAZglwWATL+WRe+CRMmmBPtpolYzIebFaX4YA3x+BEfLqhUAV9WanycKI3TG1IMr5bMJDajDKLlUQ==} + '@types/eslint@8.56.12': + resolution: {integrity: sha512-03ruubjWyOHlmljCVoxSuNDdmfZDzsrrz0P2LeJsOXr+ZwFQ+0yQIwNCwt/GYhV7Z31fgtXJTAEs+FYlEL851g==} + '@types/estree@0.0.39': resolution: {integrity: sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw==} @@ -3357,6 +3363,11 @@ packages: resolution: {integrity: sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==} hasBin: true + rollup@2.79.2: + resolution: {integrity: sha512-fS6iqSPZDs3dr/y7Od6y5nha8dW1YnbgtsyotCVvoFGKbERG++CVRFv1meyGDE1SNItQA8BrnCw7ScdAhRJ3XQ==} + engines: {node: '>=10.0.0'} + hasBin: true + rollup@4.13.0: resolution: {integrity: sha512-3YegKemjoQnYKmsBlOHfMLVPPA5xLkQ8MHLLSw/fBrFaVkEayL51DilPpNNLq1exr98F2B1TzrV0FUlN3gWRPg==} engines: {node: '>=18.0.0', npm: '>=8.0.0'} @@ -3781,6 +3792,12 @@ packages: resolution: {integrity: sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==} engines: {node: '>= 0.8'} + vite-plugin-eslint@1.8.1: + resolution: {integrity: sha512-PqdMf3Y2fLO9FsNPmMX+//2BF5SF8nEWspZdgl4kSt7UvHDRHVVfHvxsD7ULYzZrJDGRxR81Nq7TOFgwMnUang==} + peerDependencies: + eslint: '>=7' + vite: '>=2' + vite-plugin-html@3.2.2: resolution: {integrity: sha512-vb9C9kcdzcIo/Oc3CLZVS03dL5pDlOFuhGlZYDCJ840BhWl/0nGeZWf3Qy7NlOayscY4Cm/QRgULCQkEZige5Q==} peerDependencies: @@ -4871,6 +4888,11 @@ snapshots: dependencies: '@types/node': 20.11.30 + '@types/eslint@8.56.12': + dependencies: + '@types/estree': 1.0.5 + '@types/json-schema': 7.0.15 + '@types/estree@0.0.39': {} '@types/estree@1.0.5': {} @@ -6053,13 +6075,14 @@ snapshots: dependencies: eslint: 8.57.0 - eslint-plugin-prettier@5.1.3(eslint-config-prettier@9.1.0(eslint@8.57.0))(eslint@8.57.0)(prettier@3.2.5): + eslint-plugin-prettier@5.1.3(@types/eslint@8.56.12)(eslint-config-prettier@9.1.0(eslint@8.57.0))(eslint@8.57.0)(prettier@3.2.5): dependencies: eslint: 8.57.0 prettier: 3.2.5 prettier-linter-helpers: 1.0.0 synckit: 0.8.8 optionalDependencies: + '@types/eslint': 8.56.12 eslint-config-prettier: 9.1.0(eslint@8.57.0) eslint-plugin-vue@9.23.0(eslint@8.57.0): @@ -7440,6 +7463,10 @@ snapshots: dependencies: glob: 7.2.3 + rollup@2.79.2: + optionalDependencies: + fsevents: 2.3.3 + rollup@4.13.0: dependencies: '@types/estree': 1.0.5 @@ -7896,6 +7923,14 @@ snapshots: vary@1.1.2: {} + vite-plugin-eslint@1.8.1(eslint@8.57.0)(vite@5.2.2(@types/node@20.11.30)(sass@1.72.0)(terser@5.29.2)): + dependencies: + '@rollup/pluginutils': 4.2.1 + '@types/eslint': 8.56.12 + eslint: 8.57.0 + rollup: 2.79.2 + vite: 5.2.2(@types/node@20.11.30)(sass@1.72.0)(terser@5.29.2) + vite-plugin-html@3.2.2(vite@5.2.2(@types/node@20.11.30)(sass@1.72.0)(terser@5.29.2)): dependencies: '@rollup/pluginutils': 4.2.1 diff --git a/src/typings/global.d.ts b/src/typings/global.d.ts index fbf2b72..6100232 100644 --- a/src/typings/global.d.ts +++ b/src/typings/global.d.ts @@ -34,3 +34,13 @@ declare namespace TabsMenu { title: string; } } + +/* viteEnv */ +interface ViteEnv { + VITE_GLOB_APP_TITLE: string; + VITE_IMG_BASE_URL: string; + VITE_APP_OPEN_MOCK: boolean | string; + VITE_USER_NODE_ENV: "development" | "production" | "test"; + VITE_PUBLIC_PATH: string; + VITE_APP_BASE_URL: string; +} diff --git a/tsconfig.json b/tsconfig.json index 78a2ae5..471bf6b 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -35,9 +35,11 @@ "src/**/*.tsx", "src/**/*.vue", "src/auto-import.d.ts", // 与vite.config.ts-AutoImport-dts路径一致 + "build/**/*.ts", + "build/**/*.d.ts", "vite.config.ts" ], // 指定被编译文件所在的目录 // exclude表示要排除的、不编译的文件，它也可以指定一个列表，规则和include一样，可以是文件或文件夹，可以是相对路径或绝对路径，可以使用通配符 - "exclude": ["node_modules", "dist", "**/*.js"], // 指定不需要被编译的目录 - "references": [{ "path": "./tsconfig.node.json" }] + "exclude": ["node_modules", "dist", "**/*.js"] // 指定不需要被编译的目录 + // "references": [{ "path": "./tsconfig.node.json" }] } diff --git a/vite.config.ts b/vite.config.ts index 1ac8aeb..e268bdb 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -1,15 +1,8 @@ import { defineConfig, normalizePath, loadEnv } from "vite"; -import vue from "@vitejs/plugin-vue"; import path from "path"; import { resolve } from "path"; import postcssPresetEnv from "postcss-preset-env"; -import AutoImport from "unplugin-auto-import/vite"; -import Components from "unplugin-vue-components/vite"; -import { ArcoResolver } from "unplugin-vue-components/resolvers"; -import { vitePluginForArco } from "@arco-plugins/vite-vue"; -import { createSvgIconsPlugin } from "vite-plugin-svg-icons"; -import { createHtmlPlugin } from "vite-plugin-html"; -import { viteMockServe } from "vite-plugin-mock"; +import { createVitePlugins } from "./build/vite-plugin"; const themePath = normalizePath(path.normalize("./src/style/global-theme.scss")); // https://vitejs.dev/config/ @@ -17,7 +10,7 @@ export default defineConfig(({ mode }) => { // 根路径 const root = process.cwd(); // 获取跟路径对应的文件 - const env = loadEnv(mode, root); + const env: any = loadEnv(mode, root); return { // 生产环境服务的公共基础路径-用于生出环境的代理的路径 base: env.VITE_PUBLIC_PATH, @@ -33,65 +26,8 @@ export default defineConfig(({ mode }) => { } } }, - plugins: [ - vue(), - vitePluginForArco({ - style: "css" - }), - createHtmlPlugin({ - inject: { - data: { - title: env.VITE_GLOB_APP_TITLE - } - } - }), - createSvgIconsPlugin({ - // 配置src下存放svg的路径，这里表示在src/assets/svgs文件夹下 - iconDirs: [path.resolve(process.cwd(), "src/assets/svgs")], - symbolId: "icon-[dir]-[name]" - }), - AutoImport({ - // 自动导入 Vue 相关函数，如：ref, reactive, toRef 等 - imports: ["vue", "vue-router"], - // arco组件的按需加载 - resolvers: [ArcoResolver()], - // 解决eslint报错问题 - eslintrc: { - // 这里先设置成true然后npm run dev 运行之后会生成 .eslintrc-auto-import.json 文件之后，在改为false - enabled: false, - filepath: "./.eslintrc-auto-import.json", // 生成的文件路径 - globalsPropValue: true - }, - // 配置文件生成位置 - dts: "src/auto-import.d.ts" - }), - Components({ - resolvers: [ - // arco组件的按需加载 - ArcoResolver({ - sideEffect: true - }) - ], - // 自动加载组件的目录配置,默认的为 'src/components' - dirs: ["src/components"], - // 组件的有效文件扩展名 - extensions: ["vue"], - // 配置文件生成位置 - dts: "src/components.d.ts" - }), - viteMockServe({ - mockPath: "./src/mock/", // 目录位置 - logger: true, // 是否在控制台显示请求日志 - supportTs: true, // 是否读取ts文件模块 - localEnabled: env.VITE_APP_OPEN_MOCK === "true", // 设置是否启用本地mock文件 - prodEnabled: env.VITE_APP_OPEN_MOCK === "true", // 设置打包是否启用mock功能 - // 这样可以控制关闭mock的时候不让mock打包到最终代码内 - injectCode: ` - import { setupProdMockServer } from '../src/mock/index'; - setupProdMockServer(); - ` - }) - ], + // 插件：路径build/vite-plugin + plugins: createVitePlugins(env), resolve: { // 配置别名-绝对路径 alias: {