vue-cli3项目的vue.config.js中如果动态配置图片的相对路径

Question

module.exports = {
    pages,
    publicPath: isDev ? '/' : '/',
    chainWebpack: config => {
      // 处理样式或pug文件中的图片路径
      config.module
        .rule('images')
        .test(/\.(jpg|png|gif)$/)
        .use('url-loader')
        .loader('url-loader')
        .options({
          limit: 10,
          // 根据环境使用cdn或相对路径
          publicPath: isDev ? dirPath : cdnPath + dirPath + 'images',
          outputPath: 'images',
          name: isDev ? '[name].[ext]' : '[name]-[hash:8].[ext]'
        })
        .end()
    }
}

期望结果： 处理图片时，截取图片的相对路径，生成dirPath，并写到'dist/images/${dirPath}'里。

如，有个图片的路径为 'src/assets/images/project-1/page-a/xxxxx.png',希望经过images的loader后，dev调试时为'public/images/project-1/page-a/xxxxx.png',build后为'dist/images/project-1/page-a/xxxxx.png'

Answer 1

https://www.webpackjs.com/loa...

useRelativePath: true, 可能帮到你