vue-cli3的本地代理配置

Posted 2020-12-23 xiaoyuanbao

 

2019.01.04 19:48 6097浏览

 

为什么需要请求代理呢？
按照我的理解就是因为现在开发都是前后端分离，所以开发都不是在同一台主机上的，所以当我们需要再开发环境中请求API，需要服务器的API代理到本地(原理是什么呢？是如何代理过来的呢？有待下一篇文章进行探讨，暂时不去理会了)。
这个问题实际上vue-cli3已经有解决方案了，就是通过vue.config.js这个配置文件中的devServer.proxy这个对象进行配置，其中devServer.proxy指向一个开发环境下的服务器API地址，如下配置：

module.export = {
	devServer: {
		proxy:"http://localhost:8080"
	}
}

这段配置，将会告知无论请求任何资源，如果找不到资源文件，将代理到以下服务器路径
http://localhost:8080
我在开发我的开源项目的时候，遇到一个代理的需求，
我目前配置如下：

module.exports = {
    baseUrl : "./",//配置打包时的相对路径
    devServer: {
        port: "8081",//代理端口
        open: false,//项目启动时是否自动打开浏览器，我这里设置为false,不打开，true表示打开
        proxy: {
            ‘/admin‘: {//代理api
                target: "http://localhost:8080/account/admin",//服务器api地址
                changeOrigin: true,//是否跨域
                ws: true, // proxy websockets
                pathRewrite: {//重写路径
                    "^/admin": ‘‘
                }
            }
        }
    }
}

如果你想学习一下全面的配置可以参考这个链接
如果你想要更多的代理控制行为，也可以使用一个path: options成对的对象。完整的选项可以查阅
proxycontext-config

顺带扯扯baseUrl的配置吧
baseUrl

部署应用包时的基本 URL。用法和 webpack 本身的 output.publicPath 一致，但是 Vue CLI 在一些其他地方也需要用到这个值，所以请始终使用 baseUrl 而不要直接修改 webpack 的 output.publicPath。
默认情况下，Vue CLI 会假设你的应用是被部署在一个域名的根路径上，
例如 https://www.my-app.com/。
如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。
例如，如果你的应用被部署在 https://www.my-app.com/my-app/，则设置 baseUrl 为 /my-app/。
这个值也可以被设置为空字符串 (’’) 或是相对路径 (’./’)，这样所有的资源都会被链接为相对路径，这样打出来的包可以被部署在任意路径，也可以用在类似 Cordova hybrid 应用的文件系统中。
相对 baseUrl 的限制
相对路径的 baseUrl 有一些使用上的限制。在以下情况下，应当避免使用相对 baseUrl:

当使用基于 html5 history.pushState 的路由时；
当使用 pages 选项构建多页面应用时。

这个值在开发环境下同样生效。如果你想把开发服务器架设在根路径，你可以使用一个条件式的值：

module.exports = {
	baseUrl: process.env.NODE_ENV === ‘production‘? "/account/admin/":"/"	
}