Vue下配置axios请求，配置静态数据路由

新版的vue下没有dev-server。我自己进行了一下配置后发送请求返回500。
可否详细的给出vue中如何配置axios？感谢感谢！

500可能是你传参错了或者参数格式错了，也有可能服务端接口问题，跟后端同事沟通下

可以在vue.config.js里配置，可以参考我的一个项目内容gcuflush

module.exports = {
    devServer:{
        host: "localhost",
        disableHostCheck: true,
        proxy: {
            '/api': {
              pathRewrite: {
                '/api':''
              },
              target: 'http://test1.lovestrong.top:7080',
              ws: true,
              changeOrigin: true
            }
        }
    }
}

状态码报 500 不一定就是你的问题，这种情况要么是后端的接口有问题，要么是参数是否缺少某些字段(或者字段类型不对)，后台没有校验就使用了。
axios 配置基本上大同小异，就是配置拦截器，遇到问题自己多看看文档总是没错的。这里推荐可以看看

axios-拦截器欢迎使用 axios，本文档将帮助您快速上手。(troubleshooting.html) 中的解答，什么是 axios？Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。 axios Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。特性从浏览器中创建 XMLHttpRequests 从 node http://www.axios-js.com/zh-cn/docs/#%E6%8B%A6%E6%88%AA%E5%99%A8

以及

axios-请求配置欢迎使用 axios，本文档将帮助您快速上手。(troubleshooting.html) 中的解答，什么是 axios？Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。 axios Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。特性从浏览器中创建 XMLHttpRequests 从 node http://www.axios-js.com/zh-cn/docs/#%E8%AF%B7%E6%B1%82%E9%85%8D%E7%BD%AE

。

我也不知道你是用的是哪个只能大致猜测如果不对请贴出配置
vite.config.ts

  server: {
    // proxy: {
    //   // with options
    //   '/api': {
    //     target: 'http://192.168.1.128:8870',
    //     changeOrigin: true,
    //     rewrite: (path: string) => path.replace(/^\/api/, '')
    //   }
    // }
  }

这个没啥要么前端配置要么后端问题细心排查就很好发现

能返回500而不是404未找到，说明请求已经能到达后台了，没有dev- server那肯定也在其他配置文件有配置服务器路由的（不清楚你的具体项目框架是何类型，vue的框架项目好多种，大同小异，配置也不尽相同）

也有可能是你的数据问题吧。

publicPath: '/',
outputDir: 'dist',
assetsDir: 'static',
lintOnSave: process.env.NODE_ENV === 'development',
productionSourceMap: false,
devServer: {
port: port, // port:9527
open: true, // 自动打开
overlay: {
warnings: false,
errors: true
},

axios配置

封装请求地址的基础路径，src/utils/request.js
//引入 
import axios from "axios";
 
axios.defaults.baseURL = "http://157.122.54.189:6002"     // 服务器地址
//导出
export default axios  
 
封装请求函数，src/api/user.js
 
// 封装用户相关的接口
import axios from "../utils/request"
 
// 登录接口 post /login
// post请求必须使用data传参（除非后台特殊说明），get请求必须使用params传参（除非后台特殊说明）
 
export function login(data){
    return axios({
        url: "/login",
        method: "post",
        data
    })}

vue路由的配置,router
配置路由 1.下载安装包

npm i vue-router

// 配置路由 
import Vue from "vue"
 
//2.在router/index.js中引入VueRouter到中
import VueRouter from "vue-router";
 
//3. 注册VueRouter到Vue身上- 得到2个全局的组件：RouterView: 挂载点  和  RouterLink
Vue.use(VueRouter);
 
//4. 创建规则对象数组
const routes = [
  // 数组里，每个规则对象有以下属性
  {
    // path代表路由的路径
    path: "/find",
    // component代表页面组件
    component: Find,    或者component:()=>import(“组件路径”)
  },
]
 
// 5. 用规则数组生成路由对象
const router = new VueRouter({
  routes,
});
 
//6. 导出路由对象
export default router

// 7. 在main.js中引入导出路由对象,注入到到Vue实例中
import router from './router'

new Vue({
  router,
  render: (h) => h(App),
}).$mount("#app");

8.在APP.vue(需要的引入路由的vue文件),引入挂载点
 <router-view></router-view>