项目记录之jsonp与打包后无法显示阿里iconfont

前言

之前我写了一个项目，然后在面试的时候面试官想要看一下我的项目，无奈我没有部署到服务器上面，本来是想趁着周末部署一下的，后来想了一下就为了一个项目太麻烦了，先将就一下将项目打包存到手机上，用手机查看就可以了。那么之前我的这个项目跨域用的是vue-cli的proxy配置选项，也就是代理来解决的，当发布的时候就不可以这样了，要自己写一个代理服务器，所以我就改变了跨域方式，改为使用了Jsonp。

问题

使用Jsonp之后，请求无法并发执行

使用了jsonp之后，因为要提前写好一个函数以供script标签请求返回后调用，问题就是出在这个函数上，这个函数要负责触发对应的回调函数，那么当请求并发的时候，这个函数就会被多次覆盖重写，从而导致前面的请求无法正确被对应的回调函数处理

export function getJson(url){
    return new Promise((resolve, reject) => {
        if(url.includes('?')){
            url += '&callback=responHeader';
        }else{
            url += '?callback=respnHeader';
        }

        const script = document.createElement('script');
        window.responHeader = function(json){
            try{
                resolve(json);
            }finally{
                script.parentNode.removeChild(script);
            }
        }
        script.setAttribute('src',url);
        document.body.appendChild(script);
    });
}

例如我封装的jsonp函数，要在全局作用域声明一个responHeader函数供Jsonp调用，当请求并发的时候，responHeader会被多次重新赋值成一个新的函数，而函数里面的resolve自然也就不是对应promise了，我的意思是，当script标签请求的数据响应的时候，触发responHeader,那么此时调用的resolve是属于最后一次请求的promise，前两次请求的promise就永远无法被resolve了

那么为了解决这个问题，我只能将请求由并发变成串发，这样就不会有这样的问题了。如果大家有更好的解决办法欢迎评论。

打包之后加载CSS,JS文件路径出错

这个问题在vue.config.js文件里面修改publicPath配置，改成相对路径就可以了

//vue.config.js
module.exports = {
    publicPath: './'
}

打包之后无法显示iconfont

将阿里提供的代码手动补全http://就可以解决这个问题了，出现这个问题是因为不知道为什么如果我们没有写的话会自动补全成file://,有知道的欢迎评论

@font-face {
    font-family: 'iconfont';  /* project id 1319331 */
    src: url('https://at.alicdn.com/t/font_1319331_xnma1wvpymi.eot');
    src: url('https://at.alicdn.com/t/font_1319331_xnma1wvpymi.eot?#iefix') format('embedded-opentype'),
    url('https://at.alicdn.com/t/font_1319331_xnma1wvpymi.woff2') format('woff2'),
    url('https://at.alicdn.com/t/font_1319331_xnma1wvpymi.woff') format('woff'),
    url('https://at.alicdn.com/t/font_1319331_xnma1wvpymi.ttf') format('truetype'),
    url('https://at.alicdn.com/t/font_1319331_xnma1wvpymi.svg#iconfont') format('svg');
  }