vue-cli-service build --target lib作为lib导入时丢失图像路径

Question

我按照本指南创建了我的npm模块.我的repo在src/assets文件夹中包含一个svg图像(hue-cirle.svg).

当使用vue-cli-service build --target lib --name <lib-name>svg图像构建时捆绑在一起dist/img/hue-circle123456.svg.

现在当安装npm install --save <module>路径保留的模块时src/img/hue-circle123456.svg,它应该从node_modules dist文件夹引用svg图像,而不是hue-circle123456.svg从主Vue App src文件夹中引用不存在的图像.

基本上发生的是在使用我的模块的Vue项目中svg图像路径是错误的.我试图添加~强制webpack将其解释为模块依赖关系,如此处所示,但它不起作用.

最后,我放弃并在html模板中嵌入了svg,正如你在repo中看到的那样.尽管如此,我问这个问题,因为我找不到任何解决方案,我和其他人可能需要解决这个问题才能在使用vue-cli-service build --target lib --name <lib-name>命令构建的自定义模块中使用图像资源.

谢谢您的帮助!

Answer 1

我有一个类似的问题，我暂时的解决方法是将以下内容添加到vue.config.js：

module.exports = {
  css: {
    extract: false
  },
  chainWebpack: config => {
    config.module
      .rule("images")
      .use("url-loader")
      .loader("url-loader")
      .tap(options => Object.assign(options, { limit: Infinity }));
  }
};

这将所有资产内联为 base64数据 URL。

摘自：https : //cli.vuejs.org/guide/html-and-static-assets.html#relative-path-imports

编辑：

对于 SVG 试试这个：

module.exports = {
  css: {
    extract: false
  },
  chainWebpack: config => {
    const svgRule = config.module.rule('svg')
    svgRule.uses.clear()

    svgRule
      .test(/\.svg$/)
      .use('svg-url-loader') // npm install --save-dev svg-url-loader
      .loader('svg-url-loader')
  }
};

请记住，这远非最佳和解决方法！