解决前端项目安装依赖报错（图片压缩调整）

config/plugin/imageOptimizer.ts

@@ -0,0 +1,11 @@
+/**
+ * Image resource files used to compress the output of the production environment
+ * 图片压缩
+ * https://www.npmjs.com/package/vite-plugin-image-optimizer
+ */
+import { ViteImageOptimizer } from 'vite-plugin-image-optimizer';
+
+export default function configImageOptimizerPlugin() {
+  const imageOptimizerPlugin = ViteImageOptimizer();
+  return imageOptimizerPlugin;
+}

config/plugin/imagemin.ts

@@ -1,37 +0,0 @@
-/**
- * Image resource files used to compress the output of the production environment
- * 图片压缩
- * https://github.com/anncwb/vite-plugin-imagemin
- */
-import viteImagemin from 'vite-plugin-imagemin';
-
-export default function configImageminPlugin() {
-  const imageminPlugin = viteImagemin({
-    gifsicle: {
-      optimizationLevel: 7,
-      interlaced: false,
-    },
-    optipng: {
-      optimizationLevel: 7,
-    },
-    mozjpeg: {
-      quality: 20,
-    },
-    pngquant: {
-      quality: [0.8, 0.9],
-      speed: 4,
-    },
-    svgo: {
-      plugins: [
-        {
-          name: 'removeViewBox',
-        },
-        {
-          name: 'removeEmptyAttrs',
-          active: false,
-        },
-      ],
-    },
-  });
-  return imageminPlugin;
-}

config/vite.config.prod.ts

@@ -3,7 +3,7 @@ import baseConfig from './vite.config.base';
 import configCompressPlugin from './plugin/compress';
 import configVisualizerPlugin from './plugin/visualizer';
 // import configArcoResolverPlugin from './plugin/arcoResolver';
-import configImageminPlugin from './plugin/imagemin';
+import configImageOptimizerPlugin from './plugin/imageOptimizer';
 import createSvgIcon from './plugin/svg-icon';
 
 export default mergeConfig(
@@ -13,7 +13,7 @@ export default mergeConfig(
       configCompressPlugin('gzip'),
       configVisualizerPlugin(),
       // configArcoResolverPlugin(),
-      configImageminPlugin(),
+      configImageOptimizerPlugin(),
       createSvgIcon(true),
     ],
     build: {
@@ -29,5 +29,5 @@ export default mergeConfig(
       chunkSizeWarningLimit: 2000,
     },
   },
-  baseConfig
+  baseConfig,
 );

package.json

@@ -91,19 +91,21 @@
     "rollup": "^4.9.1",
     "rollup-plugin-visualizer": "^5.11.0",
     "sass": "^1.69.5",
+    "sharp": "^0.33.3",
     "stylelint": "^16.0.2",
     "stylelint-config-prettier": "^9.0.5",
     "stylelint-config-rational-order": "^0.1.2",
     "stylelint-config-recommended-vue": "^1.5.0",
     "stylelint-config-standard": "^35.0.0",
     "stylelint-order": "^6.0.4",
+    "svgo": "^3.2.0",
     "typescript": "^5.3.3",
     "unplugin-auto-import": "^0.17.3",
     "unplugin-vue-components": "^0.26.0",
     "vite": "^4.5.1",
     "vite-plugin-compression": "^0.5.1",
     "vite-plugin-eslint": "^1.8.1",
-    "vite-plugin-imagemin": "^0.6.1",
+    "vite-plugin-image-optimizer": "^1.1.7",
     "vite-plugin-svg-icons": "^2.0.1",
     "vite-svg-loader": "^4.0.0",
     "vue-tsc": "^1.8.26"

src/views/demo/visualization/multi-dimension-data-analysis/components/data-overview.vue

@@ -51,7 +51,7 @@
             el.color
           }" class="tooltip-item-icon"></span><span>${el.seriesName}</span>
         </p>
-        <span class="tooltip-value">${el.value.toLocaleString()}</span>
+        <span class="tooltip-value">${el.toLocaleString()}</span>
       </div>`
       )
       .reverse()