feat: refactor vite config

package.json

@@ -59,6 +59,7 @@
     "@types/node": "^20.8.4",
     "@types/nprogress": "^0.2.1",
     "@vitejs/plugin-vue": "^4.4.0",
+    "@vitejs/plugin-vue-jsx": "^3.0.2",
     "@vitest/coverage-c8": "^0.33.0",
     "@vue/compiler-dom": "^3.3.4",
     "@vue/test-utils": "^2.4.1",
@@ -68,6 +69,7 @@
     "jsdom": "^22.1.0",
     "lint-staged": "^14.0.1",
     "pnpm": "^8.9.0",
+    "rollup-plugin-visualizer": "^5.9.2",
     "sass": "^1.69.3",
     "typescript": "^5.2.2",
     "unocss": "^0.56.5",

src/pages/login/index.vue

@@ -2,8 +2,6 @@
 import { showSuccessToast, showToast } from "vant";
 import { ref, shallowReactive, toRef } from "vue";
 import { useRouter } from "vue-router";
-import LoginEyeOffSvg from "virtual:icons/login/eye-off";
-import LoginEyeOnSvg from "virtual:icons/login/eye-on";
 import { codeRules, mobileRules, passwordRules } from "~/utils";
 import NavBar from "~/layouts/Navbar/index.vue";
 
@@ -68,8 +66,9 @@ const { sendMobileCode, countdownValue, formRef } = useMobileCode(
         :type="loginFormData.showPassword ? 'text' : 'password'"
       >
         <template #button>
-          <LoginEyeOnSvg v-if="loginFormData.showPassword" @click="loginFormData.showPassword = !loginFormData.showPassword" />
-          <LoginEyeOffSvg v-else @click="loginFormData.showPassword = !loginFormData.showPassword" />
+          <!--          TODO -->
+          <!--          <LoginEyeOnSvg v-if="loginFormData.showPassword" @click="loginFormData.showPassword = !loginFormData.showPassword" /> -->
+          <!--          <LoginEyeOffSvg v-else @click="loginFormData.showPassword = !loginFormData.showPassword" /> -->
         </template>
       </VanField>
       <VanField

tsconfig.json

@@ -13,10 +13,10 @@
     "types": [
       "vitest",
       "vite/client",
-      "types",
       "unplugin-icons/types/vue",
       "@intlify/unplugin-vue-i18n/messages"
     ],
+    "typeRoots": ["./types"],
     "resolveJsonModule": true,
     "allowJs": true,
     "isolatedModules": true,

vite-config/configs/application.ts

@@ -0,0 +1,97 @@
+import { resolve } from "node:path";
+import { readPackageJSON } from "pkg-types";
+import type { UserConfig } from "vite";
+import { loadEnv } from "vite";
+import { configVitePlugins } from "../plugins";
+import { configureProxy, formatToDateTime, updateEnvVariables } from "../utils";
+
+export async function createApplicationViteConfig(command, mode, cwd) {
+  const root = cwd;
+  const isProductionBuild = command === "build";
+  const env: Recordable<string> = loadEnv(mode, root);
+  const defineData = await createDefineData(root);
+  const viteEnv = updateEnvVariables(env);
+  const {
+    VITE_PORT,
+    VITE_PROXY,
+    VITE_USE_HTTPS,
+    VITE_PUBLIC_PATH,
+    VITE_DROP_CONSOLE,
+  } = viteEnv;
+  const plugins = configVitePlugins(root, viteEnv, isProductionBuild);
+  const pathResolve = (pathname: string) => resolve(root, ".", pathname);
+
+  const applicationConfig: UserConfig = {
+    root,
+    base: VITE_PUBLIC_PATH,
+
+    resolve: {
+      alias: {
+        "vue-i18n": "vue-i18n/dist/vue-i18n.esm-bundler.js",
+        "~/": `${pathResolve("src")}/`,
+      },
+    },
+    server: {
+      // Listening on all local IPs
+      host: VITE_USE_HTTPS,
+      port: VITE_PORT,
+      open: true,
+      https: false,
+      proxy: !VITE_USE_HTTPS ? configureProxy(VITE_PROXY) : {},
+    },
+    esbuild: {
+      pure: VITE_DROP_CONSOLE ? ["console.log", "debugger"] : [],
+    },
+    define: defineData,
+    build: {
+      target: "es2015",
+      minify: "terser",
+      cssTarget: "chrome80",
+      rollupOptions: {
+        output: {
+          chunkFileNames: "assets/js/[name]-[hash].js",
+          entryFileNames: "assets/js/[name]-[hash].js",
+          assetFileNames: "assets/[ext]/[name]-[hash].[ext]",
+          manualChunks: {
+            vue: ["vue", "pinia", "vue-router"],
+            echarts: ["echarts", "vue-echarts"],
+            celerisComponents: ["@celeris/components", "@celeris/ca-components"],
+          },
+        },
+      },
+    },
+    css: {
+      preprocessorOptions: {
+        scss: {
+          additionalData: `
+      @import "~/styles/variables.scss";
+    `,
+          javascriptEnabled: true,
+        },
+      },
+    },
+    // https://github.com/vitest-dev/vitest
+    test: {
+      environment: "jsdom",
+    },
+    plugins,
+  };
+  return applicationConfig;
+}
+
+async function createDefineData(root: string) {
+  try {
+    const pkgJson = await readPackageJSON(root);
+    const { dependencies, devDependencies, name, version } = pkgJson;
+
+    const __APP_INFO__ = {
+      pkg: { dependencies, devDependencies, name, version },
+      lastBuildTime: formatToDateTime(new Date()),
+    };
+    return {
+      __APP_INFO__: JSON.stringify(__APP_INFO__),
+    };
+  } catch (error) {
+    return {};
+  }
+}