vue代理proxy与开发环境、生产环境配置
此文章是自己理解所记录文档，可能描述或者说明有些不妥。
配置文件
.env.development：开发环境下的配置文件,执行npm run serve命令，会自动加载.env.development文件..env.production：生产环境下的配置文件,执行npm run build命令，会自动加载.env.production文件
命名规则
属性名必须以VUE_APP_开头
比如VUE_APP_BASE_API_D.env.development文件配置
# 开发环境配置(本地)
ENV = 'development'
NODE_ENV = development# 开发环境 代理proxy
VUE_APP_BASE_API = '/dev-api'# 开发环境 网关URL
VUE_APP_REQUEST_URL = 'http://8.130.10.12:7071'.env.productio文件配置
# 生产环境配置
ENV = 'production'
NODE_ENV = production# 生产环境 代理proxy
VUE_APP_BASE_API = '/pro-api'# 生产环境 网关URL
VUE_APP_REQUEST_URL = 'http://8.130.10.12:7071'axios请求配置文件
// npm run serve 启动项目 当前是本地开发环境
if (process.env.NODE_ENV === "development") {axios.defaults.baseURL = process.env.VUE_APP_BASE_API // '/dev-api'
} else {// 如果是生产环境本地代理无作用 ， 代理只对本地运行有效axios.defaults.baseURL = process.env.VUE_APP_REQUEST_URL // 'http://8.130.10.12:7071'
}
console.log(axios.defaults.baseURL); // '/dev-api'请求接口方法文件
const prefix = '/park'//请求方法
export function login(params) {return request({url: `${prefix}/token/generateToken`,method: 'post',data: params})
}
// 当页面调用 login 方法浏览器掉用的接口是 http://localhost:8080/dev-api/park/token/generateTokenvue.config.js配置文件（代理proxy配置方式1）
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({publicPath: './',transpileDependencies: true,devServer: {port: 8080,host: 'localhost',open: true,https: false,proxy: { // 配置跨域'/park': {target: 'http://8.130.10.12:7071',ws: true,changOrigin: true,//是否跨域pathRewrite: {'^/park': '' //需要rewrite的,}},}},
})代理执行过程
1、首先在 devServer 中设置了 匹配本地请求地址含 '/park' ，target中设置了代理的目标服务器地址 : 'http://8.130.10.12:7071', 也就是接口最开头的那个地址
例如请求地址为：
http://localhost:8080/dev-api/park/token/generateToken，则把
http://localhost:8080 换成 http://8.130.10.12:70712、这个时候如果访问接口如： 'http://localhost:8080/dev-api/park/token/generateToken',因为接口包含'/park',就相当于请求 'http://8.130.10.12:7071/dev-api/park/token/generateToken'（开发环境）或'http://8.130.10.12:7071/pro-api/park/token/generateToken' （生产环境）3、pathRewrite的作用是将 '/park' 进行替换为''所以真正的请求地址是'http://8.130.10.12:7071/dev-api/token/generateToken'（开发环境） 或 'http://8.130.10.12:7071/pro-api/token/generateToken' （生产环境）
注：配置了代理proxy，修改内容后：一定要重启项目
调用接口逻辑
vue.config.js配置代理方式1
当页面调用 login 方法浏览器掉用的接口是
'http://localhost:8080/dev-api/park/token/generateToken'
因为配置了代理，所以真正请求的地址是(/park替换为'')
'http://8.130.10.12:7071/dev-api/token/generateToken'
vue.config.js配置代理方式2
//当 vue.config.js配置文件 配置的代理proxy是这样
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({publicPath: './',transpileDependencies: true,devServer: {port: 8080,host: 'localhost',open: true,https: false,proxy: {[process.env.VUE_APP_BASE_API]: {target: process.env.VUE_APP_REQUEST_URL,//'http://8.130.10.12:7071'ws: true,changOrigin: true,pathRewrite: {['^' + process.env.VUE_APP_BASE_API]: '' //需要rewrite的,process.env.VUE_APP_BASE_API:'/dev-api'}}}},
})此时代理匹配的地址就是process.env.VUE_APP_BASE_API所对应的，
如果是开发环境（npm run serve启动项目）则匹配 '/dev-api',
如果是生产环境（npm run build启动项目）则匹配 '/pro-api'当页面调用 login 方法浏览器掉用的接口是
'http://localhost:8080/dev-api/park/token/generateToken'
因为配置了代理，所以真正请求的地址是(/park替换为'')
'http://8.130.10.12:7071/park/token/generateToken'
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！