Vue中引入Snap.svg教程

柒个M

于 2020-10-10 14:25:19 发布

阅读量2.3k

点赞数 2

分类专栏： S1：Snap学习

本文链接：https://blog.youkuaiyun.com/qq_38244874/article/details/108996161

版权

本文介绍了在Vue项目中引入和使用Snap.svg的过程，包括安装snapsvg和imports-loader，解决Webpack配置问题，特别是通过降低imports-loader版本至0.8.0来消除错误。最后，文章提供了一个成功运行的眨眼睛动画Demo。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、首先安装snapsvg

npm install snapsvg --save-dev

2、安装 imports-loader

npm install imports-loader

3、之前看了别人的建议，修改webpack，但是没有成功，控制台没有报错，但是页面上空白，所以在需要Snap的页面中引入：

import Snap from 'imports-loader?this=>window,fix=>module.exports=0!snapsvg/dist/snap.svg.js'

感觉这次应该成功了，但是，还是控制台却报错了：

Failed to compile with 1 errors 10:41:12 error in ./node_modules/snapsvg/dist/snap.svg.js Module build failed (from ./node_modules/imports-loader/dist/cjs.js): ValidationError: Invalid options object. Imports Loader has been initialized using an options object that does not match the API schema. - options should be one of these: object { imports, … } | object { wrapper, … } | object { additionalCode, … } Details: * options has an unknown property 'this'. These properties are valid: object { imports, … } | ob

最低0.47元/天解锁文章