关于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;', 
        },
    ], 
},

即可。