时间戳

首页 > 解决方案 > assets 路径是指 webpack 构建后已安装包中的主应用程序

javascript - assets 路径是指 webpack 构建后已安装包中的主应用程序

问题描述

我有一个内部使用 webpack 构建的 vue js ui 组件。这个可重用的 ui 组件库引用了它的图像，如下所示：

     <img src="./assets/logo.png"/>

     <img src="./assets/edit-icon.svg"/>

  

     <img src="./assets/delete-icon.svg"/>

当我将此组件构建为库时，dist 文件夹在 dist -> img 有图像。当我在带有 npm install 的主应用程序中使用此组件时，该组件无法呈现图像，因为它们所指的路径是相对于主应用程序的。

     <img data-v-ad50538c="" src="http://localhost:8080/js/img/delete-icon.92d078a1.svg">

我应用了以下修复来临时解决问题，它适用于 svg 文件，但我还有其他文件 png、jpg .. 等

    module.exports = {
        chainWebpack: config => {
        const svgRule = config.module.rule('svg')
        svgRule.uses.clear()

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

我不确定如何为资产文件夹中可能拥有的所有文件修复此问题。我有一堆 ui 库组件，它们使用大量资产。

标签： javascriptnode.jstypescriptnpmwebpack

解决方案

您的问题是您使用的是相对路径。一个简单的转义方法是将前缀替换.为@. 而不是相对路径。Vue/Webpack 应该做剩下的事情。

// replace
<img src="./assets/logo.png"/>
//with
<img src="@/assets/logo.png"/>

推荐阅读