vue-cli服务构建--导入为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映像，而不是Vue App src主文件夹中不存在的hue-circle123456.svg映像。

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

最后，我放弃了，并将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数据URL。

取自：https://cli.vuejs.org/guide/html-and-static-assets.html#relative-路径导入

编辑：

对于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')
}
};

请记住，这远不是最佳解决方案！

Answer 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.