vite+vue3+Element3搭建

npm init vite-app 文件名 创建项目

npm i axios
npm i Element3

main.js文件

import 'element3/lib/theme-chalk/index.css'  //Element3 css文件
import axios from 'axios'
import {
    
     createApp } from 'vue'
import router from './router/index';  //路由文件路径
import App from './App.vue'
import Element3 from 'element3'  //Element3

const app=createApp(App)
app.use(router)
app.use(Element3)
app.mount('#app')

//router文件

import {
    
     createRouter, createWebHashHistory } from 'vue-router';

const routes = [
    {
    
    
        path: '/',
        name: 'login',
        // meta: { noAuth: false },
        component: () => import('../components/login.vue'),
    },
    {
    
    
        path: '/settled',
        name: 'settled',
        // meta: { noAuth: false },
        component: () => import('../components/settled.vue'),
    },
]

// 导出路由
const router = createRouter({
    
    
    history: createWebHashHistory(),
    routes
});

export default router;

vite.config.js文件

const path = require('path')
module.exports = {
    
    
    proxy: {
    
    
        '/manager': {
    
    
            target: `http://www.baidu.com`,
            changeOrigin: true,//是否允许跨域
            rewrite: path => path.replace(/^\/manager/, '')//函数形式配置以前对象形式也可以用
        }
    }
}

设置request.js封装axios

import axios from 'axios'
const service = axios.create({
    
    
  baseURL: '/manager', // api的base_url
  timeout: 35000, // 请求超时时间
  headers:{
    
    
    'Account':localStorage.getItem("accountnumber"),
    'Authorization':'Bearer '+localStorage.getItem("authorization"),
  },
});


// request拦截器
// service.interceptors.request.use(config => {
    
    
//   // if (store.getters.token) {
    
    
//   //   config.headers['Authorization'] = getToken();  // 让每个请求携带自定义token 请根据实际情况自行修改
//   // }
//   config.url=root+config.url
//   console.log(config.url)
//   return config
// }, error => {
    
    
//   // Do something with request error
//   // console.log(error) // for debug
//   // Promise.reject(error)
// })

// respone拦截器

service.interceptors.response.use(
  response => {
    
    
    const res = response.data;
    if (res.code !== 200) {
    
    
     
      if (res.code === 600) {
    
    
        
      }
    } else {
    
    
      return response;
    }
  },
  error => {
    
    
  
    return Promise.reject(error)
  }
)

export default service

api请求封装

import request from './request'
//登录
export function login(params) {
    
    
    return request({
    
    
      url: '',
      method: 'post',
      params: params
    })
  }