使用sweetalert出现Uncaught SyntaxError: Cannot use import statement outside a module


最近开发项目使用了Vue,由于对Vue的了解还停留在初识的阶段,所以难不了会出现很多以前见都没见过的错误提示,而被搞得不知所措,往往实现一个简单的功能也要花上大半天还未必能解决,为了不再犯同样的错误,我是一边做开发一边给大家分享我踩过的坑,希望给大家及时填坑,以免大家犯同样的错误。

今天做数据删除的时候希望删除前弹出个漂亮点的确定框,因而引入了SweetAlert2,我在引入的时候是这样写的:

<script type="text/javascript" src="__STATIC__/lib/sweetalert2/sweetalert2.all.min.js"></script>

刷新页面的时候在console面板出现了如下错误提示:

Uncaught SyntaxError: Cannot use import statement outside a module

错误原因:不能在模块外导入文件,我想可能是因为<script>的问题吧,于是百度了下,看网上其他朋友发贴是讲因为浏览器的默认脚本是Javascript,所以加载JS的时候我们一般不使用Type也无错,因为Module 的加载实现的是es6语法,所以在浏览器加载html文件时,需要在script 标签中加入type="module"属性,也就是说要将上述的代码改成如下:

<script type="module" src="__STATIC__/lib/sweetalert2/sweetalert2.all.min.js"></script>

这样又出现了其它错误,真是没办法写下去了,对这个鸟东西不熟悉排错真是逆天了要,算了,难得搞了,于是决定采用Requirejs一次性将Vue,Swal,Layer等一次性全部导入,代码如下:

<script type="text/javascript" src="__STATIC__/lib/requirejs/require.js"></script>
<script>
    var hostname = location.hostname;
    if(location.port) hostname += ':' + location.port;
    requirejs.config({
        map: {
            '*': {
                'css': '__STATIC__/lib/requirejs/require-css.js'
            }
        },
        shim:{
            'iview':{
                deps:['css!iviewcss']
            },
            'layer':{
                deps:['css!layercss']
            }
        },
        baseUrl:'//'+hostname+'/',
        paths: {
            'static':'static',
            'system':'system',
            'vue':'static/lib/vue/dist/vue.min',
            'axios':'static/lib/axios.min',
            'iview':'static/lib/iview/dist/iview.min',
            'iviewcss':'static/lib/iview/dist/styles/iview',
            'lodash':'static/lib/lodash',
            'layer':'static/lib/layer/layer',
            'layercss':'static/lib/layer/theme/default/layer',
            'jquery':'static/lib/jquery/jquery.min',
            'moment':'static/lib/moment',
            'sweetalert':'static/lib/sweetalert2/sweetalert2.all.min'

        },
        basket: {
            excludes:['system/js/index','system/util/mpVueComponent','system/util/mpVuePackage']
//            excludes:['system/util/mpFormBuilder','system/js/index','system/util/mpVueComponent','system/util/mpVuePackage']
        }
    });
</script>

SweetAlert实例化使用代码,大家可参考参考~~

case 'delstor':
                var url=layList.U({c:'goods.goods_list',a:'delete',q:{id:data.id}});
                if(data.status==4) var code = {title:"操作提示",text:"确定恢复产品操作吗?",type:'info',confirm:'是的,恢复该产品'};
                else var code = {title:"操作提示",text:"确定将该产品移入回收站吗?",type:'info',confirm:'是的,移入回收站'};
                requirejs(['sweetalert','axios'],function(swal,axios){
				swal(code,function(){
                    axios.get(url).then(function(res){
                        if(res.status == 200 && res.data.code == 200) {
                            swal('success',res.data.msg);
                            obj.del();
                        }else
                            return Promise.reject(res.data.msg || '删除失败')
                    }).catch(function(err){
                        swal('error',err);
                    });
                },code)
				})
                break;

这样,效果就出来了!

TIM截图20200225020148.jpg

注:本文转载自唯马网络,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。如有侵权行为,请联系我们,我们会及时删除。

评论