Snap.svg 和 Vue.js

Question

我正在尝试在我的 Vue.js 应用程序中使用 Snap.svg，但我对如何使用感到困惑。我使用 Vue CLI 3 命令初始化我的项目，并使用 yarn 安装 snapsvg 依赖项。

此外，我阅读了this article. 但是我找不到 webpack.base.conf.js 文件 !

当我尝试将依赖项导入我的 main.js 文件或任何组件时，我没有遇到任何错误，但我的应用程序变空了。

在我的 Vue.js 应用程序中正确导入 Snap.svg 我错过了什么？

Answer 1

在Vue cli 3中，webpack配置在vue.config.js

要使用 snap，请将 vue.config.js 和以下内容放在您的根目录中

module.exports = {
  chainWebpack: config => {
    config.module
      .rule("snapsvg")
      .test(require.resolve("snapsvg"))
      .use("imports-loader?this=>window,fix=>module.exports=0")
      .loader("imports-loader")
      .end();
  }
};

将此行添加到您的 main.js 文件中：

const snap = require(`imports-loader?this=>window,fix=>module.exports=0!snapsvg/dist/snap.svg.js`);

Answer 2

而不是破解 webpack，
使用 snapsvg-cjs

This project simply unwraps the excellent SnapSVG from its published AMD format and hosts it on NPM as CommonJS in a package called snapsvg-cjs. This package then works out-of-the-box with Webpack, without needing any import-loader hax.

npm install snapsvg-cjs;

您唯一需要的代码行：

import "snapsvg-cjs";

Snap.svg 和 Vue.js

Snap.svg with Vue.js

vue.js

snap.svg