vue.config.js 中的devServer

时间: 2023-08-23 14:12:58 浏览: 102

vue - vue.config.js中devServer配置方式

在Vue.js开发过程中，`vue.config.js` 文件是用于配置项目的，特别是对于开发环境的设置。其中，`devServer` 配置对象是至关重要的，因为它控制着开发服务器的行为，包括如何处理跨域请求、代理服务器设置以及端口选择等。下面我们将详细探讨 `devServer` 的配置方法。 ### 1. 解决跨域问题跨域是Web开发中常见的问题，由于浏览器的安全策略，不同源的请求会被阻止。`devServer.proxy` 可以帮助我们在开发环境中解决这个问题。例如： ```javascript devServer: { open: false, proxy: { '/nuojinadm/': { target: 'http://192.168.0.11/', changeOrigin: true } } } ``` 这里，`/nuojinadm/` 是前端发送请求时的路径前缀，所有匹配这个路径的请求都会被代理到 `http://192.168.0.11/` 这个服务器上。`changeOrigin: true` 表示允许跨域，这使得前端可以正常获取后端的数据。 ### 2. 配置axios的baseUrl 在使用axios进行API请求时，我们可以根据开发环境和生产环境的不同设置 `baseUrl`。当配置了 `devServer.proxy`，axios的 `baseUrl` 应设为空字符串，以便所有请求都能匹配到代理设置： ```javascript const baseUrl = { dev: '', pro: '/api' } ``` ### 3. 代理多个接口如果项目中需要连接多个不同的IP端口，可以在 `devServer.proxy` 中配置多个代理规则： ```javascript devServer: { open: false, port: 8801, proxy: { '/proxy1/adm/': { target: 'http://192.168.0.xx:xxxx/', changeOrigin: true }, '/proxy2/adm/': { target: 'http://192.168.0.xx:xxxx/', changeOrigin: true }, '/httpsProxy3/config/': { target: 'https://xx.xx.com', secure: false, // 对于https协议，需要设置为false changeOrigin: true } } } ``` ### 4. axios请求配置在每个需要发送请求的页面中，可以定义一个常量来保存请求路径，然后在axios请求中引用它： ```javascript const proxyxxx = '/xxx/xxx'; export const getBannerList = params => { return axios.request({ url: `${proxyxxx}/banner/v1/banner/${params.pageSize}/${params.pageNum}`, params, method: 'get' }); }; ``` 这样，即使接口地址改变，只需要更新 `proxyxxx` 的值即可，无需修改每个请求的代码。总结来说，`vue.config.js` 中的 `devServer` 配置是开发环境的关键设置，通过代理配置可以方便地处理跨域问题，同时结合axios的 `baseUrl` 配置，使得前后端分离的项目在开发阶段能够顺畅地进行数据交互。正确理解并灵活运用这些配置，将极大地提升开发效率。

devserver是Vue.js中的一个配置选项，用于配置开发服务器的行为。它可以设置服务器的端口号、代理请求、自动打开浏览器等选项。在开发过程中，我们可以根据需要对devserver进行配置，以便更好地进行开发和调试。例如，我们可以设置devserver的host为...，以便在局域网中访问开发服务器。同时，我们还可以设置devserver的proxy选项，以便在开发过程中访问跨域接口。总之，devserver是Vue.js中非常重要的一个配置选项，可以帮助我们更好地进行开发和调试。

阅读全文

vue.config.js 中的devServer

相关推荐

vue – vue.config.js中devServer配置方式

vue2.0在没有dev-server.js下的本地数据配置方法

vue.config.js中的devServer

vue3 typescript 在vue.config.js中设置devserver

解释vue.config.js中的devServer选项中各项配置的作用

解释vue.config.js中的devServer选项中proxy各项配置的作用

vue.config.js如果再devServer中不配置hot属性，hot属性的默认值是什么

vue.config.js配置devServer.proxy

nvalid options in vue.config.js: "dev" is not allowed

vue.config.js devserver

Invalid options in vue.config.js: "dev" is not allowed. "build" is not allowed

vue2项目启动报错 Invalid options in vue.config.js: "dev" is not allowed. "build" is not allowed

vue.config.js devServer 配置信息

在 vue.config.js 文件中的 devServer 的 before 钩子中将post请求转成get请求

vue.config中devServer

vue.js中vue.config.js的配置说明

vue.config.js和webpack.config.js区别

vue vue.config.js 配置

为什么vue.config中的devServer中的proxy不生效

最新推荐

Vue-cli3项目配置Vue.config.js实战记录

数学建模学习资料 姜启源数学模型课件 M04 数学规划模型 共85页.pptx

JHU荣誉单变量微积分课程教案介绍

管理建模和仿真的文件

【实战篇：自定义损失函数】：构建独特损失函数解决特定问题，优化模型性能

如何在ZYNQMP平台上配置TUSB1210 USB接口芯片以实现Host模式，并确保与Linux内核的兼容性？

Naruto爱好者必备CLI测试应用

"互动学习：行动中的多样性与论文攻读经历"

【强化学习损失函数探索】：奖励函数与损失函数的深入联系及优化策略

如何在Springboot后端项目中实现前端的多人视频会议功能，并使用Vue.js与ElementUI进行界面开发？

数学建模学习资料姜启源数学模型课件 M04 数学规划模型共85页.pptx