关于vue-cli:vuecli构建的vue项目中引入snapsvg

关上snap.svg的github：https://github.com/adobe-webplatform/Snap.svg

依照snap.svg的阐明来

1、装置snap.svg

npm install snapsvg

2 、vue是基于webpack的，webpack 2.x and 3.x 须要装置Imports Loader

npm i -D imports-loader

3、vue.config.js增加配置

module: {     rules: [         {             test: require.resolve('snapsvg/dist/snap.svg.js'),            use: 'imports-loader?this=>window,fix=>module.exports=0',         },     ], }, resolve: {     alias: {         snapsvg: 'snapsvg/dist/snap.svg.js',     }, },

4、应用：

import Snap from 'snapsvg';

此时运行我的项目会报错。示意import-loader传了不可辨认的属性。

查阅import-loader，发现其反对的属性只有

可见官网给到的rules的use配置是谬误的。

通过查看snap.svg的issue，能够找到第三条记录

点击进入 https://github.com/adobe-webplatform/Snap.svg/issues/639

so：批改配置为：

module: {     rules: [         {            test: require.resolve('snapsvg/dist/snap.svg.js'),            use: 'imports-loader?wrapper=window&additionalCode=module.exports=0;',         },    ], },

即可。