实习生不懂配置vue项目的devServer，正常吗

目的

配置devServer代理实现本地运行vue项目时，指定接口的访问路径，如：指定访问本地接口http://localhost:3000/v1/xxxx

devServer的正确配置示例！！！

1、config.js配置请求基本路径baseUrl

配置开发环境和线上环境的接口请求基础路径baseUrl

注意：此处的localBaseUrl就是后面devServe配置的接口请求基本路径baseUrl的代名词

const config = {
    baseUrl: process.env.NODE_ENV == 'development'?'/localBaseUrl/':'https://h5api.xxxx.com/v1/',
}
export { config }

以上配置的意思就是当本地运行前端(即开发环境运行代码)，在发起接口请求的时候，会用/localBaseUrl/作为请求路径

2、简单请求接口示例

采用baseUrl+'接口路径'的方式拼接完整的接口请求Url

import { config } from './config.js'
await request({
    url:config.baseUrl + 'token/xxxx'
    method: 'POST',
    data:{
      xxx:'xx'
    }
})

3、在vue.config.js配置devServer代理

module.exports = { 
    "devServer" : {
        "port" : 8080,  
        "disableHostCheck" : true,
        "proxy" : {
            "/localBaseUrl" : {
                "target" : "http://localhost:3000/v1",
                "changeOrigin" : true,
                "pathRewrite" : {
                    "^/localBaseUrl" : ""
                }
            }
        }
    }
}

以上配置的意思就是当本地运行前端，在发起请求的时候。如果接口请求路径以 /localBaseUrl 开头，就会把/localBaseUrl替换成“http://localhost:3000/v1“。

例如

/localBaseUrl/api/login

会变成如下url

http://localhost:3000/v1/api/login

4、总结

devServe配置代理，通俗理解，就是替换baseUrl而已。