vue-cli构建的vue项目中引入snap.svg

打开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;', 
        },
    ], 
},

即可。