vue 使用axios 并且实现生产环境的跨域

时间:2024-04-09 18:03:11

使用axios的不漏如下:
1.安装axios的包, npm install axios, vue-axios -S
2.把axios 封装到你想要的工具类中、
3.webpack.config.js 在dev server的环境下进行配置跨域
4.main.js 里面使用Vueaxios 和你在封装axios 里面导出的function或者是class
5.页面调用即可
代码如下图片:
1.安装好axios 和vue-axios 后你的packjson.js 在生产环境下会有以下axios 和vue-axios这两个包:
vue 使用axios 并且实现生产环境的跨域

  1. 封装axios, 就是创建一个axios 的实例,然后在里面配置跟路径,链接时间,还有你是否需要使用请求拦截器和结果拦截器:
    vue 使用axios 并且实现生产环境的跨域

3.在webpack.config.js 里面配置DevServer.如下如图:
vue 使用axios 并且实现生产环境的跨域
这里的api 在你的根路径(我上面的HTTPHelper.js)一定要有,不然你到时候加载的时候会报404

4.在main.js 里面使用,这个就比较简单了。直接导入,然后Vue.use(xxx,xxx),

5.直接在你的页面上使用:(以login为例)
vue 使用axios 并且实现生产环境的跨域

结果如下:
vue 使用axios 并且实现生产环境的跨域