1

vue.config.js

@@ -6,18 +6,19 @@ 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,
-    // 如果你不需要使用eslint，把lintOnSave设为false即可
-    lintOnSave: false,
+    lintOnSave: false, // 是否启用 eslint
+
     chainWebpack: (config) => {
+        // 别名
         config.resolve.alias.set("@", resolve("src"));
         config.resolve.alias.set("_c", resolve("src/components"));
 
-        // 正确处理 SVG 文件
+        // SVG 文件处理
         config.module.rule('svg')
             .test(/\.svg$/)
             .use('file-loader')
@@ -26,7 +27,7 @@ module.exports = {
                 name: 'assets/svg/[name].[hash:8].[ext]'
             });
 
-        // 处理图片文件（排除 SVG）
+        // 普通图片处理（排除 SVG）
         config.module.rule('images')
             .test(/\.(png|jpe?g|gif)(\?.*)?$/)
             .use('url-loader')
@@ -37,31 +38,34 @@ module.exports = {
                 outputPath: "images/"
             });
 
-        // 图片压缩（仅对 PNG、JPG、GIF）
+        // 图片压缩
         config.module.rule('images')
-            .test(/\.(png|jpe?g|gif)(\?.*)?$/)
             .use('image-webpack-loader')
             .loader('image-webpack-loader')
             .options({
                 bypassOnDebug: true,
-                mozjpeg: {
-                    progressive: true,
-                    quality: 65
-                },
-                optipng: {
-                    enabled: false,
-                },
-                pngquant: {
-                    quality: [0.65, 0.90],
-                    speed: 4
-                },
-                gifsicle: {
-                    interlaced: false,
-                },
-                webp: {
-                    quality: 75
-                }
+                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: {
@@ -69,8 +73,7 @@ module.exports = {
             filename: "js/[hash].js",
         },
     },
-    
-    // PostCSS 配置
+
     css: {
         loaderOptions: {
             postcss: {
@@ -89,12 +92,10 @@ module.exports = {
                     ]
                 }
             },
-            // LESS 配置
             less: {
                 lessOptions: {
                     javascriptEnabled: true,
                     modifyVars: {
-                        // 可以在这里定义全局LESS变量
                         '@primary-color': '#3498db',
                         '@success-color': '#52c41a',
                         '@warning-color': '#faad14',
@@ -112,6 +113,6 @@ module.exports = {
             }
         }
     },
-    // 设为false打包时不生成.map文件
+
     productionSourceMap: sourceMap,
-};
+};