There is a component in my Vue project
<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>
But when npm run build, md-icon-src is not converted into a packaged path.
But check that webpack.base.conf.js supports svg
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
},
Is this because md-icon-src is a custom attribute? How to solve it.
你还需要在 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 上绑定该数据。