Question

我正在尝试添加sweetalert，但似乎我误解了文档中的说明。当前正在努力如何包含来自node_modules文件夹的文件。

在我的刀片中，我放置了如下脚本：

$(document).ready(function() {
    Swal.fire(
        'The Internet?',
        'That thing is still around?',
        'question'
    )
});

我尝试了所有这些方法，但是没有用：

方法（1）-将这些代码添加到我的app.js文件中（基于sweetalert doc）

import Swal from 'sweetalert2/dist/sweetalert2.js'
import 'sweetalert2/src/sweetalert2.scss'

方法（2）-将这些代码添加到我的app.js文件（基于laravel doc）

mix.copy('node_modules\sweetalert2\dist\sweetalert2.js', 'public/js/sweetalert2.js');
mix.copy('node_modules\sweetalert2\dist\sweetalert2.css', 'public/js/sweetalert2.css');

然后

<link href="{{ asset('js/sweetalert2.js') }}">
<script src="{{ asset('js/sweetalert2.css') }}"></script>

它总是从我的控制台返回错误

ReferenceError：未定义混合

查看完整的错误日志：image

对不起，对不起。有人可以知道从node_modules包含文件的方式/实际上是什么吗？

Answer 1

您无需使用混合将出汗的js文件复制到公共路径

使用npm安装Swealalert

npm install sweetalert2

在app.js文件中，您有两种不同的选择

import Swal from 'sweatalert2';

OR

var Swal = require('sweatalert2');

之后，运行以下命令来编译js文件

npm run watch

在js之后附加the app layout文件之后，在每个文件中都可以使用 Swal模块

$(document).ready(function() {
    Swal.fire(
        'The Internet?',
        'That thing is still around?',
        'question'
    )
});

但是您必须在导入app.js文件的部分之后执行此操作，因为在此Swal尚未加载到项目中之前

Answer 2

使用npm安装Sweet Alert 2
```
npm install sweetalert2
```

在您的app.js文件中

import swal from 'sweetalert2';
window.swal = swal;

const toast = swal.mixin({
toast: true,
position: 'top-end',
showConfirmButton: false,
timer: 3000
});
window.toast = toast;

在您的组件中

swal.fire({
           title: 'Are you sure?',
            text: "You won't be able to revert this!" + id,
            type: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Yes, delete it!'
        }).then((result) => {

            // Send request to the server
            if (result.value) {

                axios.delete("api/category/" + id).then(() => {

                   toast.fire({
                        type: 'success',
                        title: 'Deleted successfully'
                    });

                }).catch(() => {
                    toast.fire({
                        type: 'error',
                        title: 'Error Occurred..!'
                    })
                });

            }
        })

运行npm运行开发
```
npm run dev
```

Answer 3

将const mix = require('laravel-mix');放入webpack的第一行。尝试重新运行webpack。

Answer 4

也许花时间，但是尝试bootstrap.js：

import Swal from 'sweetalert2';

然后在try部分的同一文件中：

window.Swal = require('sweetalert2');

如何在laravel（sweetalert2）中包含来自node_modules的文件

4 个答案: