修改配置

config/env.ts

-/**
- * 解析环境变量
- */
-
-export function parseEnv(env: Record<string, string>): Record<string, any> {
-  const ret = {}
-  for (const [key, value] of Object.entries(env)) {
-    // 判断是不是数字
-    if (/^\d+$/.test(value)) {
-      ret[key] = Number(value)
-    }
-    // 判断是不是布尔值
-    else if (value === 'true' || value === 'false') {
-      ret[key] = value === 'true'
-    }
-    // 判断是不是对象
-    else if (value.startsWith('{') && value.endsWith('}')) {
-      try {
-        ret[key] = JSON.parse(value)
-      } catch (error) {
-        ret[key] = value
-      }
-    }
-    // 判断是不是数组
-    else if (value.startsWith('[') && value.endsWith(']')) {
-      try {
-        ret[key] = JSON.parse(value)
-      } catch (error) {
-        ret[key] = value
-      }
-    }
-    // 其他情况
-    else {
-      ret[key] = value
-    }
-  }
-  return ret
-}
\ No newline at end of file

config/plugin.ts

-/**
- * 插件生成
- */
-
-import vue from '@vitejs/plugin-vue2'
-import legacy from '@vitejs/plugin-legacy'
-import jsx from '@vitejs/plugin-vue2-jsx'
-import compressPlugin from 'vite-plugin-compression'
-import autoImport from 'unplugin-auto-import/vite'
-import mkcert from'vite-plugin-mkcert'
-import { visualizer } from 'rollup-plugin-visualizer'
-import antdvFix from 'vite-plugin-antdv-fix'
-
-export function createPlugins(isBuild: boolean, env: any) {
-  const { VITE_HTTPS } = env
-
-  const plugins: any[] = [vue()]
-  // ployfill
-  plugins.push(legacy({ targets: ['> 0.01%, last 10 versions, Firefox ESR'] }))
-  // jsx、tsx
-  plugins.push(jsx())
-  // api自动导入
-  plugins.push(autoImport({ imports: ['vue', 'pinia', 'vue-router' ] }))
-  // https证书
-  if (VITE_HTTPS) {
-    plugins.push(mkcert({ source: 'coding' }))
-  }
-  // 打包分析
-  if (process.env.REPORT) {
-    plugins.push(visualizer({
-      filename: './node_modules/.cache/visualizer/stats.html',
-      open: true,
-      gzipSize: true,
-      brotliSize: true,
-    }))
-  }
-
-  // 打包插件
-  if (isBuild) {
-    // gzip
-    plugins.push(compressPlugin({
-      filter: /\.(js|css|html|svg)$/,
-      algorithm: 'gzip',
-      deleteOriginFile: false,
-    }))
-  }
-
-  // 修复antdv1+版本的bug
-  plugins.push(antdvFix())
-
-  return plugins
-}
\ No newline at end of file

config/proxy.ts

-/**
- * 本地服务器代理生成
- */
-
-const httpsRE = /^https:\/\//
-
-export function createProxy(proxy: any) {
-  const ret = {}
-  for (const [prefix, target] of proxy || []) {
-    ret[prefix] = {
-      target,
-      changeOrigin: true,
-      ws: true,
-      rewrite: path => path.replace(new RegExp(`^${prefix}`), ''),
-      ...(httpsRE.test(target) ? { secure: false } : {}),
-    };
-  }
-  return ret;
-}
\ No newline at end of file

package.json

@@ -5,9 +5,10 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
-    "preview": "npm run build && vite preview",
     "build": "vite build",
-    "build:report": "cross-env REPORT=true vite build"
+    "build:legacy": "cross-env LEGACY=true vite build",
+    "build:report": "cross-env REPORT=true vite build",
+    "preview": "npm run build && vite preview"
   },
   "dependencies": {
     "a-calc": "^1.2.6",
@@ -27,6 +28,7 @@
   "devDependencies": {
     "@iconify/vue2": "^2.1.0",
     "@types/lodash": "^4.14.195",
+    "@types/mockjs": "^1.0.7",
     "@types/node": "^20.3.2",
     "@vitejs/plugin-legacy": "^4.0.5",
     "@vitejs/plugin-vue2": "^2.2.0",
@@ -43,6 +45,7 @@
     "terser": "^5.18.2",
     "typescript": "^5.1.5",
     "unplugin-auto-import": "^0.16.4",
+    "unplugin-vue-macros": "^2.3.6",
     "vite": "^4.3.9",
     "vite-plugin-antdv-fix": "^1.0.3",
     "vite-plugin-compression": "^0.5.1",

tsconfig.json

@@ -16,7 +16,10 @@
     "paths": {
       "@/*": ["src/*"],
       "#/*": ["typings/*"]
-    }
+    },
+    "types": [
+      "unplugin-vue-macros/macros-global"
+    ],
   },
   "include": [
     "typings/**/*.ts",
@@ -28,5 +31,16 @@
     "auto-imports.d.ts",
     "vite-env.d.ts",
   ],
-  "references": [{ "path": "./tsconfig.node.json" }]
+  "vueCompilerOptions": {
+    "plugins": [
+      "@vue-macros/volar/define-options",
+      "@vue-macros/volar/define-models",
+      "@vue-macros/volar/define-props",
+      "@vue-macros/volar/define-props-refs",
+      "@vue-macros/volar/short-vmodel",
+      "@vue-macros/volar/define-slots",
+      "@vue-macros/volar/export-props"
+    ]
+  },
+  "references": [{ "path": "./tsconfig.node.json" }],
 }

vite.config.ts

-import { defineConfig, loadEnv } from 'vite'
 import { resolve } from 'path'
-import { createPlugins } from './config/plugin';
-import { createProxy } from './config/proxy';
-import { parseEnv } from './config/env';
-
+import { defineConfig, loadEnv, UserConfigExport } from 'vite'
+import VueMacros from 'unplugin-vue-macros/vite'
+import Vue from '@vitejs/plugin-vue2'
+import VueJsx from '@vitejs/plugin-vue2-jsx'
+import legacy from '@vitejs/plugin-legacy'
+import autoImport from 'unplugin-auto-import/vite'
+import mkcert from'vite-plugin-mkcert'
+import { visualizer } from 'rollup-plugin-visualizer'
+import antdvFix from 'vite-plugin-antdv-fix'
 import postcssImport from 'postcss-import'
 import autoprefixer from 'autoprefixer'
 
@@ -11,60 +15,40 @@ function pathResolve(dir: string) {
   return resolve(process.cwd(), '.', dir)
 }
 
-export default defineConfig(({ command, mode }) => {
+export default defineConfig(({ mode }) => {
   const root = process.cwd()
 
-  // 加载环境变量
-  const env = loadEnv(mode, root) as any
-  const viteEnv = parseEnv(env)
-  const { VITE_PUBLIC_PATH, VITE_HTTPS, VITE_PORT, VITE_PROXY } = viteEnv
-
-  const isBuild = command === 'build'
+  const env = loadEnv(mode, root)
+  const { VITE_PUBLIC_PATH, VITE_HTTPS, VITE_PORT } = env
+  const isDev = mode === 'development'
+  const isLegacy = process.env.LEGACY === 'true'
+  const isReport = process.env.REPORT === 'true'
 
-  return {
-    // 公共基础路径
+  const config: UserConfigExport = {
+    root: root,
     base: VITE_PUBLIC_PATH,
 
     resolve: {
-      // 路径别名
-      alias: [
-        // @/xxxx => src/xxxx
-        {
-          find: /@\//,
-          replacement: pathResolve('src') + '/',
-        },
-        // #/xxxx => typings/xxxx
-        {
-          find: /#\//,
-          replacement: pathResolve('typings') + '/',
-        },
-      ],
+      alias: {
+        '@': pathResolve('src'),
+        '#': pathResolve('typings'),
+      },
     },
 
-    // 本地开发服务器
     server: {
-      host: true, // 默认值：'localhost'。指定服务器主机名。
-      port: VITE_PORT, // 默认值：5173。指定服务器端口。
-      strictPort: false, // 默认值：false。如果端口已被占用，是否抛出错误而不是自动切换到下一个可用端口。
-      https: VITE_HTTPS, // 默认值：false。是否启用 https。
-      open: true, // 默认值：false。是否在服务器启动时自动在浏览器中打开应用程序。
-      proxy: createProxy(VITE_PROXY), // 默认值：{}。指定开发服务器的代理规则。
+      host: true,
+      port: Number(VITE_PORT),
+      https: VITE_HTTPS === 'true',
+      open: true,
+      proxy: {
+        '/api': {
+          target: 'http://192.168.4.33:9080',
+          rewrite: (path) => path.replace(/^\/api/, '')
+        }
+      },
     },
 
-    // 构建配置
     build: {
-      cssTarget: 'ie11', // 默认值：'modules'。指定构建目标。
-      brotliSize: true, // 默认值：true。是否生成 brotli 文件大小提示。
-      chunkSizeWarningLimit: 2000, // 默认值：500。在构建时，如果单个文件超过指定大小（以 KB 为单位），则会在终端显示警告。
-      minify: 'terser', // 默认值：'terser'。指定 JS 和 CSS 的压缩器。可以是 'terser'，'esbuild' 或 false。
-      terserOptions: { // 默认值：{}。传递给 Terser 的选项。
-        compress: {
-          keep_infinity: true, // 默认值：false。保留 Infinity。
-          drop_console: false, // 默认值：false。是否删除 console 语句。
-          drop_debugger: true, // 默认值：false。是否删除 debugger 语句。
-        },
-      },
-      // 多页面
       rollupOptions: {
         input: {
           index: resolve(__dirname, 'index.html'),
@@ -73,24 +57,46 @@ export default defineConfig(({ command, mode }) => {
       }
     },
 
-    // css 配置
     css: {
       preprocessorOptions: {
         less: {
-          javascriptEnabled: true, // 默认值：false。是否支持内联 JavaScript。
-          additionalData: `@import "./src/assets/style/const.less";`
+          javascriptEnabled: true,
+          additionalData: `@import "./src/assets/style/global.less";`
         }
       },
-      // postcss 配置
       postcss: {
         plugins: [
-          postcssImport,//这个是@import 
-          autoprefixer,//自动加浏览器前缀
+          postcssImport,
+          autoprefixer,
         ]
       }
     },
 
-    // 插件
-    plugins: createPlugins(isBuild, viteEnv), // 默认值：[]。指定用于此项目的 Vite 插件。
+    plugins: [
+      antdvFix(),
+      VueMacros({
+        plugins: {
+          vue: Vue(),
+          vueJsx: VueJsx(),
+        }
+      }),
+      autoImport({
+        imports: ['vue', 'pinia', 'vue-router' ]
+      }),
+      mkcert({
+        source: 'coding'
+      }),
+      isLegacy && legacy({
+        targets: ['> 0.01%, last 10 versions, Firefox ESR']
+      }),
+      isReport && visualizer({
+        filename: './node_modules/.cache/visualizer/stats.html',
+        open: true,
+        gzipSize: true,
+        brotliSize: true,
+      })
+    ],
   }
+
+  return config
 })