vuedevserver（vuedevserver 代理）

本篇文章给大家谈谈vuedevserver，以及vuedevserver 代理对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、Vue配置代理 解决跨域
• 2、Vue 自动打开浏览器 devServer: { open: true } 地址不正确
• 3、运行vue项目报错webpack-dev-server: Permission denied
• 4、《vue》设置代理服务器devServer 的 proxy
• 5、vue配置反向代理 devServer配置proxy

Vue配置代理 解决跨域

 方法一

在vue.config.js中添加如下配置： devServer:{   proxy:"" }

说明： 1. 优点：配置简单，请求资源时直接发给前端（8080）即可。

2. 缺点：不能配置多个代理，不能灵活的控制请求是否扒悄走代理。

3. 工作方式：若按照上述配置代理，当请求了前端不存在的资源时，那么该请求会转发给服务器 （优先匹配前端春备渣资源）

 方法二 编写vue.config.js配置具体代理规则：

module.exports = {  

devServer: {      

proxy: {       '/api1': {// 匹配所有以 '/api1'开头的请求路径        

target: '',// 代理目标的基础路径      

changeOrigin: true,      

pathRewrite: {'^/api1': ''}

},    

'/api2': {// 匹配所有以 '/api2'开头的请求路径      

target: '',// 代理目标滚帆的基础路径  

changeOrigin: true,    

pathRewrite: {'^/api2': ''}}}}

} /*  

changeOrigin设置为true时，服务器收到的请求头中的host为：localhost:5000  

changeOrigin设置为false时，服务器收到的请求头中的host为：localhost:8080

changeOrigin默认值为true */

说明： 1. 优点：可以配置多个代理，且可以灵活的控制请求是否走代理。

2. 缺点：配置略微繁琐，请求资源时必须加前缀。

链接：

[img]

Vue 自动打开浏览器 devServer: { open: true } 地址不正确

当你想运行完肢好项目,让他自动打开浏览器的时候,都会按照官方文档槐伏 DevServer | webpack , 在vue.config.js 里面加上

但是吧,运行完打开的浏览器地址是 这样的根本不对呀.

解决方案:

这样就能成功打开了,但是 他这个host 属性一设置 Local和Network就变成一样的了

如果想按照之前Network的ip显示的话写成这样

这样铅饥携 你的 Local 和 Network 就都变成ip了.

运行vue项目报错webpack-dev-server: Permission denied

直接上重点！！

webpack-dev-server:Permission denied：没有权限

原因分析 ： 原本安装vue-cli呢，桐空是会自带安装webpack的，但我是从vue3.0切换到vue2.x 版本，中间有一个强制切换到过程必然会带来早凳一些残留，这个问题的出现可能就是强制切换带来的bug，那么我们直接给陆轮旅它来个 给权全局安装 咯！

执行 下面2个命令，就OK了

《vue》设置代理服务器devServer 的 proxy

在开发环境，vue-cli 会帮我们创建一个开发服务器( )，因此，我们请求后端服务器的时候，可能会出现跨域问题，因为跨域的三要素银樱敏：域名、端口、协议其一不同。

完整的请求地址：

我的这个地址，里面本身就携带有 api 字段的

利用 vue-cli 中的 devServer 配置

记住，如果你的地址没有类似我那个地址那样，有个 api 作为标识的，你可以手动在地址上加上一些标识，然后利用 pathRewrite 再抹掉即可。

一般不会这么做，这样做意义也不大。因为这么做的话，不单单ajax请求都用的远程，连js、css、图片等其他资源都是远程返回的。。。

用了这个方法，在开发阶段，就不用设置 axios 中的 baseUrl 了，或者这样设置：

然后开发阶颂野段，你的一些ajax的请求的 url 就会匹配到 /api 开头，设置 proxy了

千万不要这么设置：

看似匹配到了，实际上没有生效。。。（我也不知道为什么，知道的同学说一下）

实际上，这里是看不到的。。

因为，F12 这里的这个请求，实际上是发给了 本地的临时服务器，再由本地的服务器发送给远程服务器。

可以这么理解：本地服务器将F12的这个请求拦截了，然后自锋枝己偷偷改掉 url，再请求的远程服务器。

正因为本地服务器脱离浏览器的束缚，解决了跨域问题！

vue配置反向代理 devServer配置proxy

vue本地开发，请求线上域名会存在跨域问题，可在devServer里配置proxy解决

关于vuedevserver和vuedevserver 代理的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。