Question

我正在尝试创建一个包含带有SVG徽标的Navbar的Vue-Component模块。这需要在一个单独的包中，因为它将用于多个不同的Vue SPA项目。

我目前正在使用Akryum/vue-share-components并设置以下内容：

src/logo.svg是一个简单的SVG标志
SRC /组件/ Test.vue

<template>
  <div class="test">
    <h1>Hello test_plugin!</h1>
    <img src="../logo.svg">
  </div>
</template>

<script>
export default {
  name: 'test',
  data () {
    return {}
  },
}
</script>

我还在webpack.base.conf

中添加了url-loader

  {
    test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
    loader: 'url-loader',
    options: {
      limit: 10000,
      name: 'img/[name].[hash:7].[ext]',
    },
  },

构建输出还处理SVG：

img/logo.e25ad72.svg   12.8 kB          [emitted]  
test_plugin.common.js     23 kB       0  [emitted]  main

当使用使用vue-templates/webpack创建并链接到插件的新项目时，由于SVG无法使用，我无法使用该组件：

<template>
  <div id="app">
    <test></test>
    <img src="./assets/logo.png">
    <hello></hello>
  </div>
</template>

<script>
import Hello from './components/Hello'
import { Test } from 'test_plugin';

export default {
  name: 'app',
  components: {
    Hello,
    Test,
  }
}
</script>

它编译，但浏览器找不到http://localhost:8080/img/logo.e25ad72.svg。有没有办法支持打包的vue组件包含的资产？

如何构建和导入使用资产的Vue-Components

0 个答案: