记录一下自己工作vite的代理使用和axios的请求之前

 

这个搭建起一个vue项目

https://www.cnblogs.com/hechunfeng/p/17249626.html

 

 

1. 因为使用的是vite，所以配置上如下，看server，

env.VITE_HTTPURL是里面的开放环境或者生成环境的变量

 

这个是vite.config.ts的内容

import { defineConfig,loadEnv} from 'vite'
//Install node types before calling below import
import {fileURLToPath} from "url";
import path from 'path';
import vue from '@vitejs/plugin-vue'

import AutoImport from "unplugin-auto-import/vite";


// https://vitejs.dev/config/
export default defineConfig(({ mode })=>{
  const env = loadEnv(mode, __dirname);
  return {
    plugins: [
      vue(),
      AutoImport({
        //Targets(file extensions)
        include:[
          /\.[tj]sx?$/,
          //Regex which says t or j followed by sx. tsx jsx ,? next to x says it can happen zero or one time js ,ts
          /\.vue$/,
          // $ at the end says it ends with vue
        ],
        //globals (libraries)
        imports:["vue","vue-router","pinia"],
        //other settings/files/dirs to import
        dts:true,//Autoimport all the files that ends with d.t 
        //Autoimport inside vue template
        vueTemplate:true,
        eslintrc:{enabled:true}
      })
    ],
    base: env.VITE_MODE === 'production' ? './' : '/',
    resolve:{
      alias:{
        //Two methods available
        //Method 1 : using fireURLtoPath(keep adding other paths as needed)
        "@":fileURLToPath(new URL("./src",import.meta.url)),

        //Method 2 : using path
        "@components":path.resolve(__dirname,"src/components"),
        "@pages":path.resolve(__dirname,"src/pages"),
        "@layout":path.resolve(__dirname,"src/layout"),
        "@tests":path.resolve(__dirname,"src/tests"),
        "@assets":path.resolve(__dirname,"src/assets"),
        "@api":path.resolve(__dirname,"src/api"),
        "@stores":path.resolve(__dirname,"src/stores"),
        "@utils":path.resolve(__dirname,"src/utils"),
        "@routers":path.resolve(__dirname,"src/routers"),
      }
    },
  // 配置 // pathRewrite:{'^/api':""} 跨域配置  http://192.168.1.133/api/   http://192.168.1.253:8081/api/
  server:{
    proxy:{
      "/api":{
        target:env.VITE_HTTPURL,
        changeOrigin:true,
        rewrite:(path)=>path.replace(/^\/api/,"")
      }
    }
  }
}
})

 

 

 

axios，我在utils下的request文件下配置,登录之后需要存token

import axios from 'axios'
import router from '@/routers/router'



const request = axios.create({
    baseURL:'/api',
    timeout:600000,
    headers:{'Content-Type':'application/json;charset=utf-8','Authorization':`Bearer '+${localStorage.getItem('userToken_ERP')}`}
})



// 请求拦截器,在每个请求前添加token
request.interceptors.request.use(
    (config)=>{
        const token = localStorage.getItem('userToken_ERP')
        if(token){
            if(config && config.headers){
                config.headers.Authorization=`Bearer ${token}`;
            }
        }else{
            
        }
        return config;
    },
    (error)=>{
        return Promise.reject(error);
    }
)

// 响应拦截器,如果请求返回401,说明token失效或未授权,则跳转到登录页
request.interceptors.response.use(
    (response)=>{
        return response
    },
    (error)=>{
        const code =error.response ? error.response.status : null
        if(code === 401){
            console.log(error.response.status,'401')
            router.push("/login")
        }
        return Promise.reject(error)
    }
)







export default request

 

 

 

然后再新建api文件夹下的，再使用

import request from "@/utils/request";
/**
 * 获取客户信息
 */
function getCustomerInfoList(data:object){
    return request.post('customer_index',data)
}