vue3项目实战-接口调用

Vue3接口实战

原创已于 2024-08-20 14:40:24 修改 · 361 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

于 2024-08-20 14:39:19 首次发布

vue项目建成后会有如下文件,接口通常放在apis文件夹下的.ts文件中.

通常情况下,我们的开发环境与后端接口会发生跨域问题,所以一般先要做一下跨域处理,在vite.config.ts文件中来处理:

export default defineConfig({
  ...
  server: {
     ...
    proxy: {
       //主要是这一块的内容
      "/api": { //你想给代理网址起什么名就什么名
        target: "http://xxx.xxx.xx.xx:xxx", //这里写你的跨域地址
        changeOrigin: true,
        ws: true,
        rewrite: path => path.replace(/^\/api/, ""),  //将路径写到store上
      },
    },
  },
});

跨域问题解决后就可以来添加接口了,后面引入接口就可以使用啦

import { server } from "@/plugins/axios"; //引入axios

export async function getnTotal(params) {
  const res = await server.post("/api/xxx/xxx", {
    params,
  });
  return res.data;
}

相关配置项后续再编辑