vue-cli3.0中如何将img文件打包至指定路径?

如何将下面的文件放入指定文件夹中?
image.png
配置如下

/*
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-10-05 09:25:57
 * @LastEditTime: 2019-10-05 13:14:44
 * @LastEditors: Please set LastEditors
 */
var ps = require('process');
const merge = require('webpack-merge');
module.exports = {
    publicPath: process.env.NODE_ENV === "production" ? "wap" : "",
    devServer: {
        port: 8092,
        proxy: {
            "/app/api/v2": {
                target: "https://zzya.aabb.com",
                ws: false,
                changeOrigin: true //是否跨域
            }
        },
        disableHostCheck: true
    },

    outputDir: undefined,
    assetsDir: './wap',
    runtimeCompiler: undefined,
    productionSourceMap: false,
    parallel: undefined,

    css: {
        loaderOptions: {
            sass: {
                data:
                    '@import "@/styles/skin.scss";@import "@/styles/common.scss";@import "@nutui/nutui/dist/styles/index.scss";'
            },
            stylus: {
                "resolve url": true,
                import: ["./src/theme"]
            }
        }
    },

    pluginOptions: {
        "cube-ui": {
            postCompile: true,
            theme: true
        }
    },
    chainWebpack: config => {
        config.module
            .rule("images")
            .use("image-webpack-loader")
            .loader("image-webpack-loader")
            .options({
                bypassOnDebug: true
            });
        config.module
            .rule("images")
            .test(/\.(png|jpe?g|gif|webp)(\?.*)?$/)
            .use("url-loader")
            .loader("url-loader")
            .tap(options =>
                merge(options, {
                    limit: 51200 /// 文件大小(低于50Kb才会base64编码)
                })
            );
    }
};
阅读 4.9k
4 个回答

node_modules包引用错误

你用production模式,即vue-cli-service build 打包出来就是这样的

  1. 你的上个问题解决了吗?
  2. 你现在打包,需要指定文件,你需要配置 url-loader

你的url-loader配置加上 name试试

limit: 51200, // 就这行下面
name: 'wap/img/[name].[hash:5].[ext]'
       
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题