Vue3 axios安装及配置 devServer属性配置

原创已于 2022-07-30 20:58:58 修改 · 5.3k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

于 2022-07-30 20:54:57 首次发布

vue3 同时被 2 个专栏收录

6 篇文章

订阅专栏

axios

1 篇文章

订阅专栏

1. 安装axios

npm i axios --save

2. 配置axios

创建api文件夹（路径：src/api）

创建index文件 (路径：src/api/index)

配置index.js文件

import axios from 'axios'

const instance = axios.create({
    baseURL:'http://localhost:3000', 
    //不存在跨域问题这样直接配置
  
})
//登录请求
export const dologin = (data) => {
    return instance.request({
        url: '/login/cellphone',
        method: 'post',
        params: data,
 
    })
}

3. 跨域问题

如果你的前端应用和后端需要跨域，你需要在开发环境下将 API 请求代理到 API 服务器。可以通过 *.config.js 中的 devServer.proxy 选项来配置。

当运行 npm run dev 的时候，devServer首先会在内存中创建类似的dist目录，这里不会看到生成的dist打包文件，是因为webpack-dev-server是将打包编译结果放在内存中，内部的http-sever会访问这些文件并读取数据，再发送给浏览器，由浏览器打开进行预览。

devServer.proxy 可以是一个指向开发环境 API 服务器的字符串：

   devServer: {
    open: false, // 编译完成是否打开网页
    host: '0.0.0.0', // 指定使用地址，默认localhost,0.0.0.0代表可以被外界访问
    port: 8080, // 访问端口
    https: false, // 编译失败时刷新页面
    disableHostCheck: true,	// 是否关闭用于 DNS 重绑定的 HTTP 请求的 HOST 检查。
    hot: true, // 开启热加载
    hotOnly: false,
    proxy: {
      [process.env.VUE_APP_API]: {
        // 拦截器(拦截链接中有/api)
        target: process.env.VUE_API_DEV_TARGET, // 'http://192.168.1.114:3000', //process.env.VUE_API_DEV_TARGET, //API服务器的地址
        changeOrigin: true,	// 是否跨域
        pathRewrite: { //重写路径
          // '^/api': ''
          [`^${process.env.VUE_APP_API}`]: ''
          // 配置出来的接口没有 /api
          // 比如/api/admin/being/classes/classInfo 会被替代成/admin/being/classes/classInfo
        }
      }
    }
  },

实际使用高频属性详解

devServer: {
    // 运行代码的目录
    contentBase: resolve(__dirname, 'build'),
    // 监视contentBase目录下的所有文件，一旦有变化就会reload
    watchContentBase: true,
    watchOptions:{
        // 忽略文件
        ignored: /node_modules/
    },
    // 启动gzip压缩
    compress: true,
    // 端口号
    port: 5000,
    // 域名
    host: 'localhost',
    // 自动打开浏览器
    open: true,
    // 开启HMR功能
    hot: true,
    // 不要显示启动服务器的日志
    clientLogLevel: 'none',
    // 除了一些基本启动信息外，其他内容都不要显示
    quiet: true,
    // 如果出现错误信息，不要全屏提示
    overlay: false,
    // 服务器代理，解决开发环境下跨域问题
    proxy: {
        // 一旦devserver（5000）服务器接收到 /api/xxx的请求，就会把请求转发到另外一个服务器（3000）
        '/api': {
            target: 'http://localhost:3000',
            // 发送请求时，请求路径重写：将/api/xxx -> /xxx(去掉/api)
            pathRewrite:{
                '^/api': ''
            }
        }
    }
}

PS：devServer.disableHostCheck配置项用于配置是否关闭用于 DNS 重绑定的 HTTP 请求的 gao它通常用于搭配–host 0.0.0.0使用，因为你想要其它设备访问你本地的服务，但访问时是直接通过 IP 地址访问而不是 HOST 访问，所以需要关闭 HOST 检查。

其中的process.env.Vue_app_API是开发环境文件.env.development中的内容

VUE_APP_API = "/api"
VUE_API_DEV_TARGET = "http://192.168.1.114:3000/" //请求地址

创建axios实例

const service = axios.create({
  baseURL: process.env.VUE_APP_API,
  withCredentials: true, // send cookies when cross-domain requests
  timeout: 30000, // request timeout
  headers: {
    "Content-Type": "application/json;"
  }
});

1. proxy会拦截所有url中可以成功匹配到 ‘/api’ 的请求。（proxy采用正则匹配，一旦url中包含你要的字符串则停止向下匹配，详查proxy匹配规则）

2. 它会把拦截到的请求中的baseUrl替换为此处的target
如，http://192.168.1.114:3000/banner为请求内容的api,
本地项目为http://192.168.1.114:3001/进行访问，这就需要跨域，经过上述配置后。
使用http://192.168.1.114:3001/api/baner请求时，通过devServer.proxy拦截器把 http://192.168.1.114:3001/api进行替换成http://192.168.1.114:3000/后加/banner进行请求

api调用

export function getBrainInfo(params) {
  return service.request({
    url: '/expert/brain',
    method: 'get',
    params
  })
}

第二种

devServer: {
    disableHostCheck: true,
    open: true,
    host: '192.168.1.114', // 本机ip
    port: 3001, // 本机端口
    https: true,
    proxy: 'http://192.168.1.114:3000', // 需代理的地址
    before: app => {}
 },

代理 proxy：当您有一个单独的API后端开发服务器，并且想要在同一个域上发送API请求时，则代理这些 url

proxy: {
    '/proxy': {
        target: 'http://your_api_server.com',
        changeOrigin: true,
        pathRewrite: {
            '^/proxy': ''
        }
}

假设你主机名为 localhost:8080 , 请求 API 的 url 是 http：//your_api_server.com/user/list
'/proxy'：如果点击某个按钮，触发请求 API 事件，这时请求 url 是http：//localhost:8080/proxy/user/list 。
changeOrigin：是否跨域。如果 true ，那么 http：//localhost:8080/proxy/user/list 变为 http：//your_api_server.com/proxy/user/list 。但还不是我们要的 url 。
pathRewrite：重写路径。匹配 /proxy ，然后变为'' ，那么 url 最终为 http：//your_api_server.com/user/list 。

参考

webpack-dev-server【devServer属性配置】_JIseven的博客-优快云博客_webpack-dev-server配置

vue.config.js文件的devServer本地开发相关配置._青颜的天空的博客-优快云博客_devserver vue.config.js

配置参考 | Vue CLI