前言
主要是两个地方添加配置，使用的方法可自行参考
添加配置
-
.env.development文件配置
# 开发环境配置
ENV = 'development'
# 开发环境
VUE_APP_BASE_API = '/dev-api'
# ftp代理/开发环境
VUE_APP_FTP_API = '/ftp-api'
-
vue.config.js文件配置代理示例，这里使用.env.development文件中相应的配置名称，为了明显，这里只截取devServer配置（ip 地址都是假的）
module.exports = {
// webpack-dev-server 相关配置
devServer: {
host: '0.0.0.0',
port: port,
proxy: {
// detail: https://cli.vuejs.org/config/#devserver-proxy
[process.env.VUE_APP_BASE_API]: {
target: `http://102.xxx.211.xxx5:8008`,
changeOrigin: true,
pathRewrite: {
['^' + process.env.VUE_APP_BASE_API]: ''
}
},
[process.env.VUE_APP_FTP_API]: {
target: `http://110.xx.xxx.35:8081/prod-api`,
changeOrigin: true,
pathRewrite: {
['^' + process.env.VUE_APP_FTP_API]: ''
}
}
},
disableHostCheck: true
}
}
使用
这里简单写一下使用方法
- 一般我们在
request.js给axios设置默认的baseURL
import axios from 'axios'
const service = axios.create({
// axios中请求配置有baseURL选项，表示请求URL公共部分
baseURL: process.env.VUE_APP_BASE_API,
// 超时
timeout: 600000
})
- 第二个代理的使用方式（因为用的地方不多，所以没有做什么封装，你可以根据所需自行扩展），这里是一个简单
api.js示例
import request from '@/utils/request'
export function getData(params) {
return request({
baseURL: process.env.VUE_APP_FTP_API,
url: '/system/job/list',
method: 'get',
params
})
}
