码迷,mamicode.com
首页 > 其他好文 > 详细

vue-cli3的本地代理配置

时间:2020-05-28 13:47:27      阅读:82      评论:0      收藏:0      [点我收藏+]

标签:div   targe   如何   构建   webp   push   content   空字符串   端口   

 

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/":"/"	
}

vue-cli3的本地代理配置

标签:div   targe   如何   构建   webp   push   content   空字符串   端口   

原文地址:https://www.cnblogs.com/xiaoyuanbao/p/12979629.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!