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

Posted 2023-02-22

【中文标题】vue-cli-service build --target lib 导入为 lib 时丢失图像路径

【英文标题】：vue-cli-service build --target lib loses images path when imported as lib

【发布时间】：2019-01-02 13:00:03

【问题描述】：

我按照guide 创建了我的 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 图像，而不是Vue App src 主文件夹中不存在的hue-circle123456.svg 图像.

基本上发生的情况是使用我的模块的Vue项目中的svg图像路径错误。我尝试添加 ~ 以强制 webpack 将其解释为建议的模块依赖项 here 但它不起作用。

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

感谢您的帮助！

【问题讨论】：

我很惊讶还没有人回答这个问题：/

我认为alias 不会解决这个问题。当我在构建为 lib 之后检查捆绑文件时。我发现我的图像是webpack.__require__，路径是localhost:8080/xxx/my-image 但是当我在project1 中使用lib 作为依赖项时，我看到了图像请求，但没有真正的图像数据响应成功代码200跨度>

【参考方案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 Data URLs。

取自：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')
  
;

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

【讨论】：

你是我的救命恩人。

【参考方案2】：

这是使用 WebPack 解析路径的文档：

https://webpack.js.org/configuration/resolve/

资产的路径可以像这样解析，例如：

process.env.NODE_ENV == "production ? path.resolve(process.cwd(), "dist/assets") : path.resolve(__dirname, "src/assets");

生产：

process.cwd() // Where the application is running. You can pack it for example.