Vue组件库下游引用CSS时Webpack无法解析图片资源的问题

方法1：修改组件库的publicPath配置 #

在组件库的vue.config.js中设置相对路径的publicPath，让打包后的CSS资源引用路径变为相对路径，下游应用导入时能正确定位到node_modules内的资源：

module.exports = {
  publicPath: './',
  configureWebpack: {
    output: {
      libraryExport: 'default'
    }
  }
}

重新执行组件库打包命令：

vue-cli-service build --target lib --name my-ui-components ./src/index.ts

打包后CSS中的资源引用会从/img/warning-dark.a45b259b.svg变为./img/warning-dark.a45b259b.svg，下游Webpack解析时能找到同级的img目录。

方法2：调整组件库的资源处理规则 #

如果方法1不生效，可通过chainWebpack手动调整资源打包的路径规则：

module.exports = {
  chainWebpack: config => {
    // 处理图片资源
    config.module.rule('images')
      .use('url-loader')
      .tap(options => {
        return {
          ...options,
          publicPath: './',
          outputPath: 'img/'
        }
      })
    
    // 处理字体资源
    config.module.rule('fonts')
      .use('url-loader')
      .tap(options => {
        return {
          ...options,
          publicPath: './',
          outputPath: 'fonts/'
        }
      })
  }
}

方法3：下游应用配置Webpack解析规则 #

若组件库无法修改，可在下游Vue CLI应用的vue.config.js中添加规则，让Webpack识别node_modules内的组件库资源：

module.exports = {
  chainWebpack: config => {
    // 解析组件库的svg资源
    config.module.rule('svg')
      .include.add(/node_modules\/my-ui-components\/dist\/img/)
      .end()
      .use('url-loader')
      .loader('url-loader')
      .options({
        limit: 8192,
        name: 'img/[name].[hash:8].[ext]'
      })
    
    // 解析组件库的字体资源
    config.module.rule('fonts')
      .include.add(/node_modules\/my-ui-components\/dist\/fonts/)
      .end()
      .use('url-loader')
      .loader('url-loader')
      .options({
        limit: 8192,
        name: 'fonts/[name].[hash:8].[ext]'
      })
  }
}

也可使用copy-webpack-plugin将组件库资源复制到下游静态目录（需维护资源同步，优先级低于前两种方法）：

const CopyWebpackPlugin = require('copy-webpack-plugin')

module.exports = {
  configureWebpack: {
    plugins: [
      new CopyWebpackPlugin({
        patterns: [
          { from: 'node_modules/my-ui-components/dist/img', to: 'img' },
          { from: 'node_modules/my-ui-components/dist/fonts', to: 'fonts' }
        ]
      })
    ]
  }
}

注意事项 #

• 确保组件库打包后，dist目录下的img、fonts文件夹完整包含所有资源，且文件名与CSS引用一致。
• 适配Nuxt时，在nuxt.config.js的build.extend中调整Webpack规则即可，逻辑与Vue CLI一致。

内容的提问来源于stack exchange，提问作者rugbert