Как импортировать bootstrap.bundle.min.js в VUE проекта с помощью веб-пакета - PullRequest
Новая
       6

Как импортировать bootstrap.bundle.min.js в VUE проекта с помощью веб-пакета

0 голосов
/ 31 января 2019

У меня есть задание по переносу проекта начальной загрузки в проект VUE.

У меня есть bootstrap.bundle.min.js (v4.1.3), файл css и куча третьей или определенной пользователем js lib.,Я проделал следующую работу для импорта этих файлов.

Я использую ниже для импорта файлов CSS. 

//App.vue
<style src="xxx.css"></style>

И в main.js я хочу импортировать jquery и bootstrap.bundle.min.js глобально. 

//main.js
import 'jquery'
import 'popper.js'
import 'src/bootstrap/bootstrap.bundle.min.js'

Я добавляю плагин веб-пакета для решения '$ is notfined' (и я не знаю, почему это выдается во время выполнения, а во время компиляции) 

     configureWebpack: {

         plugins: [
             new webpack.ProvidePlugin({
                 jQuery: 'jquery',
                 $: 'jquery',
             })
         ],

Iизменили метку html на компонент vue.После того, как я сделал все выше, я все еще получил ошибку 

Uncaught TypeError: Cannot set property 'bootstrap' of undefined
at eval (bootstrap.bundle.min.js?6518:7)

Я ценю вашу помощь в том, почему это произошло и как ее решить.

1 Ответ

0 голосов
/ 31 января 2019

То, как вы используете webpack.ProvidePlugin в вашем массиве plugins, называется Shimming. Вот документ .Я думаю, что это плохая практика, если вы используете такой мощный инструмент, как Webpack.У вас нет $, потому что вам нужно импортировать его следующим образом: import $ from 'jquery'.Поэтому убедитесь, что вы установили все свои зависимости и импортировали их в свои модули.

Надеюсь, это поможет.Если нет, просто ответьте здесь, и мы будем говорить больше.удачи!

...