开始之前先说一下，

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

但是在vue3中移除了process，普通页面或者js文件中可以通过import.meta.env来获取上面配置文件的变量，vite.config.js中 需要 引入 loadEnv 来自于vite,然后通过loadEnv(mode, process.cwd())获取，（参数mode为开放模式或生产模式）,下面也会有写到。并且.env这种文件需要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 !== 'production' ? import.meta.env.VITE_APP_BASE_API : import.meta.env.VITE_SERVER_URL
// 设置超时时间
axios.defaults.timeout = 10000axios.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 = tokenreturn 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 productconst 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',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'})
}

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