1

vue.config.js

@@ -8,7 +8,6 @@ const resolve = (dir) => {
 const BASE_URL = process.env.NODE_ENV === "development" ? "/" : "/";
 const sourceMap = process.env.NODE_ENV === "development";
 const ResponsiveLoaderSharp = require('responsive-loader/sharp');
-
 module.exports = {
     publicPath: BASE_URL,
     lintOnSave: false, // 是否启用 eslint
@@ -27,7 +26,8 @@ module.exports = {
             .use('file-loader')
             .loader('file-loader')
             .options({
-                name: 'assets/svg/[name].[hash:8].[ext]'
+                context: resolve('src/assets/img'),
+                name: 'images/[path][name].[ext]'
             });
 
         // 普通图片处理（排除 SVG）
@@ -38,37 +38,11 @@ module.exports = {
             .options({
                 limit: 10000,
                 esModule: false,
-                outputPath: "images/"
+                outputPath: "images/",
+                context: resolve('src/assets/img'),
+                name: '[path][name].[ext]'
             });
 
-        // 图片压缩
-        config.module.rule('images')
-            .use('image-webpack-loader')
-            .loader('image-webpack-loader')
-            .options({
-                bypassOnDebug: true,
-                mozjpeg: { progressive: true, quality: 60 },
-                optipng: { enabled: false },
-                pngquant: { quality: [0.5, 0.6], speed: 4 },
-                gifsicle: { interlaced: false },
-                webp: { quality: 75 }
-            });
-
-
-      
-
-        // config.module.rule('responsive-images')
-        //     .test(/\.(png|jpe?g|gif)$/i)
-        //     .use('responsive-loader')
-        //     .loader('responsive-loader')
-        //     .options({
-        //         adapter: ResponsiveLoaderSharp,
-        //         sizes: [1200, 1920], // 超过宽度会生成缩小版本
-        //         quality: 75,
-        //         name: 'images/[name]-[width].[ext]',
-        //         placeholder: false
-        //     });
-
     },
 
     configureWebpack: {