本文主要包括vue3中集成axios以及分环境打包部署
版本
- node 16.18.0
- Vue3
配置基础环境
- 安装axios
npm install axios
- 编写dev与prod环境文件
dev
NODE_ENV='development'
prod
NODE_ENV='production'
- 动态配置环境信息
export interface IConfig {
env: string // 开发环境
mock?: boolean // mock数据
title: string // 项目title
baseUrl?: string // 项目地址
baseApi?: string // api请求地址
APPID?: string // 公众号appId 一般放在服务器端
APPSECRET?: string // 公众号appScript 一般放在服务器端
}
const dev: IConfig = {
env: "development",
mock: false,
title: "开发",
baseUrl: '/api',
baseApi: "http://127.0.0.1:8080",
APPID: "17970",
APPSECRET: "zuiyu"
}
const prod: IConfig = {
env: "production",
mock: false,
title: "生产",
baseUrl: "/api",
baseApi: "http://localhost:8080",
APPID: "17970",
APPSECRET: "zuiyu"
}
export const config: IConfig = import.meta.env.MODE == 'development' ? dev : prod
- 打包修改配置
package.json,修改build-only
如下,主要增加--mode production
"scripts": {
"dev": "vite",
"build": "run-p type-check build-only ",
"build-only": "vite build --mode production"
}
- 封装request.js
import axios from "axios";
// import router from "@/router";
import {config} from "@/config/index.ts";
const service = axios.create({
// baseURL 需要设置为反向代理前缀,不能设置绝对路径URL
baseURL: config.baseUrl,
timeout: 5000,
withCredentials: false,
headers: {'X-Custom-Header': 'zuiyu'}
})
service.defaults.headers.common['Authorization'] = "AUTH_TOKEN";
service.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
service.defaults.headers.get['Content-Type']='application/x-www-form-urlencoded'
// 添加请求拦截器
service.interceptors.request.use(function (req) {
// 在发送请求之前做些什么
console.log('请求前拦截器1:',config)
console.log('请求前拦截器2:',req)
// if (config.loading) {
// }
return req;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});
//添加响应拦截器
service.interceptors.response.use(function (response) {
// 对响应数据做点什么
const res = response.data;
if (res.code !== 200) {
// token 过期
if (res.code === 401)
// 警告提示窗
return;
if (res.code == 403) {
return;
}
// 若后台返回错误值,此处返回对应错误对象,下面 error 就会接收
return Promise.reject(new Error(res.msg || "Error"));
}
return response;
}, function (error) {
// 对响应错误做点什么
if (error && error.response) {
switch (error.response.status) {
case 400:
error.message = "请求错误(400)"
break
case 401:
error.message = "未授权,请登录(401)"
break
case 403:
error.message = "拒绝访问(403)"
break
case 404:
error.message = `请求地址出错: ${error.response.config.url}`
break
case 405:
error.message = "请求方法未允许(405)"
break
case 408:
error.message = "请求超时(408)"
break
case 500:
error.message = "服务器内部错误(500)"
break
case 501:
error.message = "服务未实现(501)"
break
case 502:
error.message = "网络错误(502)"
break
case 503:
error.message = "服务不可用(503)"
break
case 504:
error.message = "网络超时(504)"
break
case 505:
error.message = "HTTP版本不受支持(505)"
break
default:
error.message = `连接错误: ${error.message}`
}
} else {
if (error.message == "Network Error") error.message == "网络异常,请检查后重试!"
error.message = "连接到服务器失败,请联系管理员"
}
return Promise.reject(error);
});
export default service
- 配置反向代理地址
根目录vite.config.ts
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue(), vueJsx()],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
},
server: {
cors: true, // 默认启用并允许任何源
open: true, // 在服务器启动时自动在浏览器中打开应用程序
port: 5173,
proxy: {
'^/api': {
target: 'http://127.0.0.1:8080/',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, '')
},
}
}
})
调取后台接口
- 编写测试
api.js
import service from '@/util/request.js'
export const testGetMethod = () => service.get('/test/get')
export const testGetHaveParamsMethod =
(params) => service.get('/test/getHaveParams',{params:params})
export const testPost = (params) =>
service.post('/test/post',
params,
{
headers: {"Content-Type": "application/x-www-form-urlencoded"}
}
)
export const testPostJson =
(params) => service.post('/test/postJson',params)
export const testPostFile =
(params) => service.post('/test/postFile',params,{
headers: {"Content-Type": "application/x-www-form-urlencoded"}
})
- 接口调用
- 组件中引入
import {testPostFile} from "@/api/api"; // 或者引入全部使用 import TestApi from "@/api/api";
- 调用
const uploadFile = (fileReqOpt) => { let fd = new FormData() fd.append("file",fileReqOpt.file) fd.append("params","自定义参数") testPostFile(fd) } // 或者 async function test() { let p ={ params: "参数1", file: "file" } let result = await testPostFile(p); }