vue-cli3 axios以及配置代理

vue-cli3 axios以及配置代理

axios使用

• 安装axios

  npm install axios --save
  

• 在 main.js 中引入 axios

  import axios from 'axios'
  Vue.prototype.$axios = axios
  

• vue文件，使用axios请求数据

  • 参考官方文档

配置代理

• 在src同级别目录下新建vue.config.js文件

module.exports = {
    devServer: {
        /* 自动打开浏览器 */
        open: false,
        https: false,
        /* 使用代理 */
        proxy: {
            '/api': {
                target: 'https://www.xxxx.xxx/', //后端地址
                // target: 'http://127.0.0.1:8000/', //后端地址
                secure: false,  // 如果是https接口，需要配置这个参数
                ws: true,//是否代理websockets
                changeOrigin: true,
                pathRewrite: {
                    '^/api': ''
                }
            }
        }
    },
}

• 如果不想每次使用url时开头都是/api,可在main.js中添加

axios.defaults.baseURL = '/api';

• 重启服务