方案一： 配置文件
文件内容
# 开发环境
NODE_ENV = 'development'
# base api
VUE_APP_BASE_API = '/api'
# 开发环境，Url地址
VUE_APP_URL = 'https://localhost:44367/api'三个文件分别是三个不同环境使用的，如线上，线上测试，本地测试。我在本地测试时三个文件都配置成了一样。
vue.config.js 配置文件
const path = require('path');
const resolve = dir => {
return path.join(__dirname, dir);
};
const env = process.env.NODE_ENV;
console.info('env: ------>', env, 'api:------>', process.env.VUE_APP_URL,'VUE_APP_BASE_API:-->',process.env.VUE_APP_BASE_API);
module.exports = {
// mode: 'production',
publicPath: process.env.NODE_ENV === 'production' ? './' : './', // 启动页地址
// publicPath: './', // 启动页地址
outputDir: "dist", // 打包的目录
indexPath: 'index.html', // 生成html文件名
assetsDir: 'static', // 静态资源文件目录
runtimeCompiler: true,
lintOnSave: false, // 在保存时校验格式
productionSourceMap: false, // 生产环境是否生成 SourceMap
/*
chainWebpack: config => {
// 修复热更新
config.resolve.symlinks(true);
},
*/
devServer: {
/*1.测试成功 配合配置文件使用 VUE_APP_URL = 'https://localhost:44367/api'*/
proxy: {
[process.env.VUE_APP_BASE_API]: {// api 表示拦截以 /api开头的请求路径
target: process.env.VUE_APP_URL,//跨域的域名（不需要写路径）
changeOrigin: true, //是否开启跨域
ws: true, //是否代理websocked
pathRewrite: { //重写路径
['^' + process.env.VUE_APP_BASE_API]: ''//把 /api 变为空字符
}
},
},
/*2.测试成功 配置写死 target 不带/api，注意没有pathRewrite属性,调用接口时这么写 api/User/gettest*/
/* port: 8088,
proxy: {
'/api': {// api 表示拦截以 /api开头的请求路径
target : 'https://localhost:44367',//跨域的域名（不需要写路径）process.env.VUE_APP_URL
changeOrigin : true, //是否开启跨域
ws: true, //是否代理websocked
},
},
/*3.测试成功 配置写死 target 带/api，注意要加pathRewrite属性,调用接口时这么写 api/User/gettest*/
/*
proxy: {
'/api': {// api 表示拦截以 /api开头的请求路径
target : 'https://localhost:44367/api',//跨域的域名（不需要写路径）process.env.VUE_APP_URL
changeOrigin : true, //是否开启跨域
ws: true, //是否代理websocked
pathRewrite : { //重写路径
'^/api' : '' //把 /api 变为空字符
}
},
}, */
}
}问题：
控制台显示 400 (Bad Request)或404等问题都是 vue.config.js 配置文件 的 proxy 的配置问题。
主要检查点是 target 里没有带 /api 和 pathRewrite 属性的问题。
如果使用配置文件要检查 文章来源：https://www.toymoban.com/news/detail-840026.html
VUE_APP_BASE_API = '/api' 这里要小心，要注意有没有带 /
VUE_APP_URL = 'https://localhost:44367/api' 这里也要检查要和vue.config.js 配置文件里的代码配合使用。
END文章来源地址https://www.toymoban.com/news/detail-840026.html
到了这里，关于vue.config.js 配置proxy代理的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
![vue3配置代理--[vite] http proxy error](https://imgs.yssmx.com/Uploads/2024/02/713230-1.png)
