vue-cli如何配置代理服务器及可能遇到的问题

可能的状况：

在使用vue-cli进行日常开发的时候，经常需要在本地localhost直接调用远程服务器的接口而不是直接mock模拟数据，这时在浏览器中调试可能会遇到跨域问题，那么就需要配置代理。

可能的处理方式：

1、通过配置Chrome 启动参数--disable-web-security关闭浏览器安全策略以达到允许跨域，具体方法可自行百度，不建议。

2、配置代理服务器，vue-cli归根结底使用的还是webpack，所以需要对其进行相关配置，如果你的工程根目录里没有vue.config.js文件，那就先新建一个，然后做如下配置：

module.exports = {
    devServer: {
        open: true,
        host: 'localhost',
        port: '8080',
        https: false,
        hotOnly: false,
        proxy: {
            '/api': {
                target: 'http://api.xxx.com',
                ws: true, 
                changeOrigin: true, 
                pathRewrite: {
                  '^/api': '',
                }
            }
        }
    }
}

在这段配置里最主要是要理解'/api'的意义，他的意思是匹配所有包含'/api'这个字符（也可以换成其他字符）的地址对其进行代理，所以要在跨域访问的接口地址里加上'/api'。target就是服务器的地址这个很明显。pathRewrite直译就是路径重写，意思是可能你刚才添加的'/api'这个路径是无用的，只是用于代理去识别匹配的，正式服务器接口是不需要的，这就需要把他去掉或者改成服务器接口真实的路径。

这里还可能会遇到的问题是，如果你直接修改接口地址，要是你用于代理匹配的这个字符在正式服不需要，那打包的时候被打包进去就会有问题。那么就应该根据开发模式/生产模式去配置。这里简单提一下，通常来讲使用vue-cli开发，会配置两个文件.env.development和.env.production，如果没有可以在根目录自己新建。在文件里默认应该是有个VUE_APP_BASE_URL，只需要分别设置不同的地址，一个是包含用于代理匹配的'/api'字符的，一个是正式服使用的。然后如果使用的是axios再结合设置其baseURL为这个字段就行了。如果需要你也可以在两个文件里增加其他的如VUE_APP_BASE_API = "/api"这样的字段去分别处理。

更详细的配置说明见官方地址：
https://www.webpackjs.com/configuration/dev-server/#devserver-proxy