Fatal编程技术网
  • javascript/
  • Javascript 根据包导出目录获取映像路径

Javascript 根据包导出目录获取映像路径

javascript vue.js webpack

Javascript 根据包导出目录获取映像路径,javascript,vue.js,webpack,webpack-dev-server,vue-cli-3,Javascript,Vue.js,Webpack,Webpack Dev Server,Vue Cli 3,我正在尝试通过调整网页包配置的一些方法。这是我的问题- 我有一个vue组件包@foo/atom，其中有一些组件通过将静态图像作为模块导入来在内部使用它们 包装中的自定义组件 import logo from '@/assets/logo.svg' data() { return { logo } } <img :src="logo" /> 现在，当我将此组件包括到我的vue应用程序中时 import { CustomComponent } from

我正在尝试通过调整网页包配置的一些方法。这是我的问题-

我有一个vue组件包
@foo/atom
，其中有一些组件通过将静态图像作为
模块导入来在内部使用它们

包装中的自定义组件


import logo from '@/assets/logo.svg'

data() {
 return {
  logo
 }
}

<img :src="logo" />


现在，当我将此组件包括到我的vue应用程序中时


import { CustomComponent } from '@foo/atom'

<CustomComponent />


这里的问题是，当我的本地服务器启动webpack时，将本地构建目录附加到映像的相对路径之前，即
http://localhost:3001/js/
它应该在哪里
node\u module/@foo/atom/lib/img
，因为图像存储在那里

我想我可以简单地将所有的
node\u module/@foo/atom/lib/img
复制到app的root
src/assets
目录中，但这并不奏效


我被困在这里，任何线索或方向都将被感激。如果还需要一些其他信息，请告诉我。
您可以尝试为此创建一个网页包别名/解析，谢谢@Lhew，但是我不确定当组件导出为构建块时，这是否会起作用，我需要告诉块在生成时使用
/
目录，而不是相对路径

import { CustomComponent } from '@foo/atom'

<CustomComponent />



http://localhost:3001/js/img/logo.123123.svg