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

46次阅读

共计 732 个字符，预计需要花费 2 分钟才能阅读完成。

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

即可。

正文完