vue代理proxy与开发环境、生产环境配置
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/generateToken
vue.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:7071
2、这个时候如果访问接口如: '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'
更多推荐
已为社区贡献2条内容
所有评论(0)