vue-cli3的本地代理配置

为什么需要请求代理呢?
按照我的理解就是因为现在开发都是前后端分离,所以开发都不是在同一台主机上的,所以当我们需要再开发环境中请求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/":"/"	
}
原创文章 864 获赞 1294 访问量 50万+

猜你喜欢

转载自blog.csdn.net/qq_36772866/article/details/85795111