Question

我遵循了这个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映像，而不是来自目录中不存在的hue-circle123456.svg映像主Vue App的src文件夹。

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

最后，我放弃了svg并将其嵌入到html模板中，正如您在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 Data URLs。

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

Answer 2

以下是WebPack解析路径的文档：

this topic

可以像这样解析资产路径：

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.

vue-cli-service构建-目标lib在作为lib导入时丢失图像路径

2 个答案: