遇到的问题
因为png无法修改颜色，所以使用svg形式，然后因为webpack有对svg进行编译转化，导致成为base64，无法使用v-html
解决方案
想到的一个解决办法是把svg的webpack去掉
1 2 3 4 5 6 7 8 9 | {<!-- --> test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, loader: 'url-loader', options: {<!-- --> limit: 10000, name: utils.assetsPath('img/[name].[hash:7].[ext]') }, exclude: [resolve('src/images/icon/svg')] }, |
但是运行svg直接引入编译出错
1 2 3 4 5 | [Vue warn]: Error in created hook: "Error: Module parse failed: Unexpected token (1:0) You may need an appropriate loader to handle this file type. | <svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg"> | <path fill-rule="evenodd" clip-rule="evenodd" d="M23.5576 3.92064C22.9895 3.35523 22.0713 3.35523 21.5033 3.92064L8.43155 16.9315C8.08483 17.2766 7.94834 17.7528 8.02209 18.2011C8.05796 18.5182 8.19782 18.8257 8.44168 19.0684L21.5134 32.0793C22.0815 32.6447 22.9997 32.6447 23.5677 32.0793C24.1396 31.5101 24.1396 30.5845 23.5677 30.0154L11.4911 17.9949L23.5576 5.98458C24.1294 5.41542 24.1294 4.4898 23.5576 3.92064Z" fill="#191D25"/> | </svg>" |
看报错原因是说缺乏合适的loader，不能有文件不用loader处理，所以我这边去找loader，发现svg-inline-loader 这个loader是最适合处理svg，原样输出的。
svg-inline-loader 解决
1 2 3 4 | {<!-- --> test: /\.(svg)(\?.*)?$/, loader: 'svg-inline-loader' }, |
至此解决了这个问题
参考文章