Vue项目上线部署的那些坑

    最近公司的前端项目要上线，这才发现原来在开发环境跑的很流畅的代码在生产环境中遇到很多坑，在此做一个总结，以免日后再走弯路。
    
    跨域问题：
    
        从开发环境切换到生产环境首先面临的是跨域的问题，开发时为了简单就直接在vue里设置的代理，可到了生产环境就不灵了，出来混迟早要还的。多么痛的领悟。。。
        首先我们要弄明白什么是跨域，为何会产生跨域。
        跨域其实是受制于浏览器的同源策略，
    
    跨域解决方案：
   
        1.通过jsonp跨域
        2.通过修改document.domain来跨子域
        3.使用window.name来进行跨域
        4.使用HTML5中新引进的window.postMessage方法来跨域传送数据
           5. CORS
           
        那就先来说说怎么解决这个问题吧，当然采取了简单粗暴的方法：CORS(Cross-origin resource sharing)方式，在服务端设置响应头：
        'Access-Control-Allow-Origin','*'
    
    Vue的API配置问题:
    
        在本地跑的好好的Vue怎么发布到线上就不行了，思来想去觉得是环境问题。原来这是由于开发环境和生产环境的接口地址不同导致，发布后Vue无法访问接口，自然获取不到数据。 首先，在config中找到以下两个文件：
    
    /config/dev.env.js
    /config/prod.env.js
    这两个文件就是针对生产环境和发布环境设置不同参数的文件,打开dev.env.js文件，如下：
    
    module.exports = {
        NODE_ENV: '"development"',
        APP_ORIGIN: '"https://wallstreetcn.com"'
    }
    
    在NODE_ENV下增加一行：
    
    module.exports = {
        NODE_ENV: '"development"',
        BASE_API: '"http://192.168.0.140:3001"',
        APP_ORIGIN: '"https://wallstreetcn.com"'
    }
    
    然后修改prod.env.js:
    
    module.exports = {
        NODE_ENV: '"production"',
        BASE_API: '"http://*.*.*.*:3001"',
        APP_ORIGIN: '"https://wallstreetcn.com"'
    };
        
    然后，在项目中这样调用：
    
    // 配置API接口地址
    var root = prod.env.BASE_API