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
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值