搜索

首页  >  问答  >  正文

javascript - Webpack 自定义属性md-icon-src 打包的时候不转换

在我的Vue工程中有一个组件

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

但是npm run build的时候,md-icon-src没有被转换成打包后的路径。
但是查看webpack.base.conf.js里是支持svg的

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

请问这是因为md-icon-src是自定义属性的原因吗?该如何解决。

阿神阿神2816 天前732

全部回复(1)我来回复

  • phpcn_u1582

    phpcn_u15822017-05-18 11:00:30

    你还需要在 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 上绑定该数据。

    回复
    0
  • 取消回复