最近开发项目使用了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;

这样，效果就出来了！