vue项目中(vue-cli3)代理配置不成功及 axios的 baseUrl 设置无效问题_综合

最近开发项目时配置代理过程中遇到一个非常低级的错误，导致配置完代理后，项目运行请求接口一直是404；并同时因为这个低级错误，自己对前端vue项目的代理配置又混乱，直至发现问题后才对代理配置清晰明了起来。本文简单记录问题解决方式及自己对vue项目中的代理配置一点小理解，避免日后再次踩坑。

vue项目中涉及的文件简单描述：

1、该项目的后台的服务地址为：http://10.10.10.10/aa
2、现在请求一个后台的验证码接口为： /code/img
3、vue项目中环境配置（.env.development文件和 .env.production文件）为：

# 开发环境配置(本地)
ENV = 'development'
NODE_ENV = development# 开发环境  代理proxy
VUE_APP_BASE_API = '/dev-api'# 开发环境  网关URL
VUE_APP_REQUEST_URL = 'http://10.10.10.10/aa'

# 生产环境配置
ENV = 'production'
NODE_ENV = production# 生产环境  代理proxy
VUE_APP_BASE_API = '/pro-api'# 生产环境 网关URL
VUE_APP_REQUEST_URL = 'http://10.10.10.10/aa'

4、vue项目中的代理配置（vue.config.js）为：

module.exports = {
    devServer: {
     // webpack-dev-server 相关配置overlay: {
    warning: false,err: false},hot: true,hotOnly: true, // 是否热更新host: '0.0.0.0',port: '8080',open: true,proxy: {
    [process.env.VUE_APP_BASE_API]: {
    target: process.env.VUE_APP_REQUEST_URL,changeOrigin: true,pathRewrite: {
    ['^'+process.env.VUE_APP_BASE_API]: ''}}},disableHostCheck: true}
}

5、vue项目中axios的封装文件（axios.js）为:

// 1、引入axios
import axios from 'axios'
// 2、创建axios的实例
const httpService = axios.create({
    baseUrl: process.env.NODE_ENV === 'production' ? process.env.VUE_APP_REQUEST_URL : process.env.VUE_APP_BASE_API,timeout: 10000
})
// 5、get请求 请求参数直接放在 url? 后面
export function get (url, params = {
     }, headers = {
     }) {
    return new Promise((resolve, reject) => {
    httpService({
    url: url,method: 'get',params: params,headers: headers}).then(res => {
    if (res) {
    resolve(res)}}).catch(err => {
    reject(err)})})
}

6、接口请求文件为：

import {
     post, get, urls } from '../../axios.js'
// 获取图形验证码
export const getImgCode = () => get('/code/img')

问题所在：

1、axios.js文件中创建实例后的全局基础路径配置错误，不是 baseUrl 而是 baseURL ,改成baseURL接口就能访问成功，不会出现404，即：

const httpService = axios.create({
    baseURL: process.env.NODE_ENV === 'production' ? process.env.VUE_APP_REQUEST_URL : process.env.VUE_APP_BASE_API,timeout: 10000
})

扩展：由于axios这个全局基础路径配置失误，导致自己对vue的前端代理配置理解陷入混乱中，直至发现这个问题的根源，突然对代理的配置一下子清晰起来，简单说一下：

module.exports = {
    devServer: {
     // webpack-dev-server 相关配置overlay: {
    warning: false,err: false},hot: true,hotOnly: true, // 是否热更新host: '0.0.0.0',port: '8080',open: true,proxy: {
    [process.env.VUE_APP_BASE_API]: {
    target: process.env.VUE_APP_REQUEST_URL,changeOrigin: true,pathRewrite: {
    ['^'+process.env.VUE_APP_BASE_API]: ''}}},disableHostCheck: true}
}

1、后台的验证码接口地址是：http://10.10.10.10/aa/code/img

2、其中前端设置 process.env.VUE_APP_REQUEST_URL = http://10.10.10.10/aa

3、前端本地环境配置代理proxy: process.env.VUE_APP_BASE_API = ‘/dev-api’ ; 前端生产环境配置代理proxy: process.env.VUE_APP_BASE_API = ‘/pro-api’ ;

4、代理过程：

1、首先在 devServer 中设置了 process.env.VUE_APP_BASE_API ，target中设置了代理的目标服务器地址 : process.env.VUE_APP_REQUEST_URL, 也就是接口最开头的那个地址2、这个时候如果访问接口如： /code/img,就可以全局使用 process.env.VUE_APP_BASE_API ，
此时 process.env.VUE_APP_BASE_API 就相当于 process.env.VUE_APP_REQUEST_URL，
也就是说我们请求 /code/img 就相当于请求 http://10.10.10.10/aa/dev-api/code/img（本地环境） 或  http://10.10.10.10/aa/pro-api/code/img3、pathRewrite的作用是将 process.env.VUE_APP_BASE_API 进行替换,如果接口中没有 process.env.VUE_APP_BASE_API，那就替换成 '' ,如果接口中需要 process.env.VUE_APP_BASE_API， 那么就需要写成 ['^'+process.env.VUE_APP_BASE_API]: process.env.VUE_APP_BASE_API，可以理解成为一个重定向或者重新赋值的作用，
我本地这个项目是不需要有 process.env.VUE_APP_BASE_API ，所以就写成了 ['^'+process.env.VUE_APP_BASE_API]: '', 这样我请求 /code/img 就相当于请求 http://10.10.10.10/aa/code/img

vue项目中(vue-cli3)代理配置不成功 及 axios的 baseUrl 设置无效问题