javascript – Das benutzerdefinierte Webpack-Attribut md-icon-src wird beim Packen nicht konvertiert

Question

Es gibt eine Komponente in meinem Vue-Projekt

  <md-bottom-bar-item v-for="tab in tabs"
    :id="tab.id"
    md-icon-src="../assets/icon/ic_home_black_48px.svg"
    :md-active='tab.active'>{{ tab.title }}
  </md-bottom-bar-item>

Aber wenn npm build ausführt, wird md-icon-src nicht in den gepackten Pfad konvertiert.
Aber überprüfen Sie, ob webpack.base.conf.js SVG unterstützt

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

Liegt das daran, dass md-icon-src ein benutzerdefiniertes Attribut ist? Wie man es löst.

Answer 1

你还需要在 webpack 中为 vue-loader 设置 transformToRequire，为之添加 md-bottom-bar-item 元素的 md-icon-src 属性必须转换为 require。

参见：http://vue-loader.vuejs.org/e...

或者参与此讲座：/l/15...，6.5 折限时优惠中。

还有一个思路是在 script 里 require svg 文件给组件实例数据，然后在 md-icon-src 上绑定该数据。