Snap.svg с Vue.js
Я пытаюсь использовать Snap.svg в своем приложении Vue.js, но не понимаю, как это сделать. Я использовал команду Vue CLI 3 для инициализации моего проекта и установки зависимости snapsvg с помощью yarn.
Также читаю эта статья.
Но я не могу найти файл webpack.base.conf.js!
Когда я пытаюсь импортировать зависимость в мой файл main.js или в любой компонент, у меня нет ошибок, но мое приложение становится пустым.
Что я пропустил, чтобы правильно импортировать Snap.svg в свое приложение Vue.js?
Ответы 2
В Vue cli 3 веб-пакет настраивается в 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`);
Вместо взлома 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";