vite2 + Vue3中axios的封装，代理

vite2 + Vue3中axios的封装，代理

开始之前先说一下，

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 = 10000axios.defaults.withCredentials = true// 设置请求传递数据格式 axios.defaults.headers['Content-Type'] = 'application/x- // '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'// 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 = 'request from '@/utils/request'export function getUserInfo() { return request({ url: '/user', method: 'get' })}

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

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。