1

vue.config.js

@@ -1,4 +1,5 @@
 const path = require("path");
+const CopyWebpackPlugin = require('copy-webpack-plugin');
 
 const resolve = (dir) => {
     return path.join(__dirname, dir);
@@ -20,7 +21,21 @@ module.exports = {
         config.resolve.alias.set("@", resolve("src"));
         config.resolve.alias.set("_c", resolve("src/components"));
 
-        // SVG 文件处理
+        // 统一图片产物目录：dist/images（保留子目录，不带 hash）
+        // 说明：Vue CLI 默认会把被打包的图片输出到 dist/img（带 hash），
+        // 这里覆盖为与 CopyWebpackPlugin 一致的 images 目录，避免出现 dist/img。
+        config.module.rule('images')
+            .test(/\.(png|jpe?g|gif|webp)(\?.*)?$/)
+            .use('url-loader')
+            .loader('url-loader')
+            .options({
+                limit: 10000,
+                esModule: false,
+                outputPath: 'images',
+                context: resolve('src/assets/img'),
+                name: '[path][name].[ext]'
+            });
+
         config.module.rule('svg')
             .test(/\.svg$/)
             .use('file-loader')
@@ -29,23 +44,17 @@ module.exports = {
                 context: resolve('src/assets/img'),
                 name: 'images/[path][name].[ext]'
             });
-
-        // 普通图片处理（排除 SVG）
-        config.module.rule('images')
-            .test(/\.(png|jpe?g|gif)(\?.*)?$/)
-            .use('url-loader')
-            .loader('url-loader')
-            .options({
-                limit: 10000,
-                esModule: false,
-                outputPath: "images/",
-                context: resolve('src/assets/img'),
-                name: '[path][name].[ext]'
-            });
-
     },
 
     configureWebpack: {
+        plugins: [
+            new CopyWebpackPlugin([
+                {
+                    from: resolve('src/assets/img'),
+                    to: 'images'
+                }
+            ])
+        ],
         output: {
             filename: "js/[hash].js",
         }