vite2 + Vue3中axios的封装，代理-CFANZ编程社区

开始之前先说一下，

process这个东西是nodejs中内置的，而且不需要require引入，vue2中我们可以通过process.env.NODE_ENV 来判断当前环境、通过process.env.VUE_APP_<自定义名称>，来获取.env、.env.development、.env.production配置文件中的变量（普通.vue文件和vue.config.js文件都可以获取到）。

但是在vite2中移除了process，普通页面或者js文件中可以通过import.meta.env来获取上面配置文件的变量，vite.config.js中需要引入 loadEnv 来自于vite,然后通过loadEnv(mode, process.cwd())获取，（参数mode为开放模式或生产模式）,下面也会有写到。并且.env这种文件需要VITE_<自定义名称>才行

可以参考 -> vite环境变量和模式

1.安装 axios

npm install axios --save

2.简单封装axios（在utils下新建request.js）

request.js

import axios from 'axios'
// import qs from 'querystring'

// 根据环境变量 统一设置 域名 前缀
axios.defaults.baseURL = import.meta.env.MODE !== 'production' ? import.meta.env.VITE_APP_BASE_API : import.meta.env.VITE_APP_SERVER_URL
// 设置超时时间
axios.defaults.timeout = 10000

axios.defaults.withCredentials = true

// 设置请求传递数据格式  
axios.defaults.headers['Content-Type'] = 'application/x-www-form-urluncoded'  // 'application/json'
// axios.defaults.transformRequest = data => qs.stringify(data)   //针对POST请求

// 请求拦截
axios.interceptors.request.use(config => {
  console.log(config,'请求config-->>')
  // const token = localStorage.getItem('token')
  // if(token) config.headers.Authorization = token

  return config
})

// 响应拦截
axios.interceptors.response.use(response => {
  return response.data
}, error => {
  if(error.response) {
    if(error.response.status === 401) {
      // 权限
    }else if(error.response.status === 402 || error.response.status === 403) {
      // 服务器拒绝  token过期
    }else if(error.response.status === 404) {
      // 路径错误  跳转到404页面  path -> *
    }
  }else {
    if(!window.navigator.onLine) {
      // 断网处理
      // 跳转到断网页面
    }
    return Promise.reject(error)
  }
})

export default axios

3. 配置代理转发到目标服务器（解决前端本地开发跨域问题）

vite.config.js

import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
const path = require('path')



// element -plus 配置 按需导入-> 自动导入
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'



// https://vitejs.dev/config/
export default ({ mode }) => {
  console.log(mode,'参数mode--->>>>')
  //参数mode为开放模式或生产模式
  //console.log(mode);  // development or product
  const env = loadEnv(mode, process.cwd());   // 获取.env文件里定义的环境变量

  return defineConfig({
    plugins: [
      vue(),
      AutoImport({
        resolvers: [ElementPlusResolver()],
      }),
      Components({
        resolvers: [ElementPlusResolver()],
      }),
    ],
    define: {
      'process.env': { name: '哈哈哈', age: 12 }
    },
    // 别名
    resolve: {
      alias: {
        //设置别名
        '@': path.resolve(__dirname, './src'),
        '@assets': path.resolve(__dirname, './src/assets')
      }
    },

    // 通过代理方式解决跨域问题
    server: {
      port: '3000',
      host: '0.0.0.0',//指定服务器应该监听哪个 IP 地址。 如果将此设置为 0.0.0.0 将监听所有地址，包括局域网和公网地址。如果不设置，运行会有Network: use `--host` to expose
      open: false, //自动打开 
      // base: "./ ", //生产环境路径
      proxy: { // 本地开发环境通过代理实现跨域，生产环境使用 nginx 转发
        // 正则表达式写法
        '/api': {
          target: env.VITE_APP_SERVER_URL, // 后端服务实际地址
          changeOrigin: true, //开启代理
          rewrite: (path) => path.replace(/^\/api/, '')
          // rewrite: () => ''
        }
      }
    }
  })
}

.env.development

NODE_ENV = 'development'

VITE_APP_BASE_API = '/api'

VITE_APP_SERVER_URL = 'http://127.0.0.1:8888'

4.接下来就是测试一下

可以在src新建api文件夹，统一管理接口

src/api/user.js

import request from '@/utils/request'

export function getUserInfo() {
  return request({
    url: '/user',
    method: 'get'
  })
}

调用这个方法直接用就好了