vue项目配置生产环境和发布环境的接口地址

vue项目配置生产环境和发布环境的接口地址

平常我们团队开发时,都在公司的局域网内,调用接口也是局域网内部的,但是项目上线时,请求接口是线上服务器端的,那么就有接口之间的来回切换问题.在使用vue-cli搭建项目以后,做相关配置就可以实现,不用手动更改接口路径,也可以请求不同环境下的接口.

1.设置不同的接口地址

先找到以下文件

/config/dev.env.js

/config/prod.env.js

可以看到dev.env.js里面内容如下

这是生产环境的参数配置,然后我们可以再上面文件加入一行代码,如下:

这就是本地测试环境请求后台接口的域名

然后找到prod.env.js文件,如下:

我们加入一行代码,如下:

这是我们上传服务器以后,请求后台接口的域名

2.在代码中调用设置好的参数,

比如我在本项目中重新封装axios(api文件在/src/api/index.js中),将配置好的接口地址作为baseURL拼接到接口路径中,应用参数部分如下:

最后重新启动项目就可以了,当npm run dev的时候就运行在生产环境,当npm run build的时候就是正式的线上环境.

在使用axios的时候会发现没有jsonp的请求方式,所以如果要使用axios直接进行跨域访问是不可能的,这样就需要配置代理了.

因为客户端请求服务端的数据是存在跨域问题,但是服务器与服务器之间可以通过云处理服务商或者其他的方法实现共享数据,所以说服务器没有跨域的概念(如果服务器没有设置禁止跨域权限的问题),那么这样,我们可以配置一个代理服务器来请求另一个服务器中的数据,然后把请求的数据返回到我们的代理服务器中,代理服务器在返回数据到客户端,这就可以实现跨域访问数据.

3.在config/index.js中找到dev对象

详见:https://github.com/chimurai/http-proxy-middleware#options其实这个我还没有看的太深,目前只拜读了这些.

本文根据项目中实际用到的配置方法,参考http://blog.csdn.net/fungleo/article/details/54574049文章,整理一下笔记

相关推荐

vue 命令行的方式搭建用git管理的vue项目

阅读 585

华为云12.12狂欢，低至1.5折

广告

七、撸vue/cli 3.+ 的正确姿势（快捷导航/keep-alive缓存router-view）

阅读 2925

webpack 多人开发个人代理及域名配置

阅读 240

vue项目中引用并使用本地js

阅读 867