vue.config.js文件devServer字段的常用选项

在 Vue CLI 生成的 vue.config.js 文件中,devServer 字段用于配置开发服务器的选项。下面是其中几个常用选项的说明:

  1. host:指定开发服务器的主机名,默认值是 'localhost'。你可以将其设置为 '0.0.0.0',以允许通过局域网中的其他设备访问开发服务器。例如,host: '0.0.0.0'

  2. port:指定开发服务器的端口号,默认值是 8080。你可以根据需要将其设置为其他端口号。例如,port: 3000

  3. open:一个布尔值,指定是否在启动开发服务器后自动在浏览器中打开项目,默认值是 false。如果将其设置为 true,则项目启动后会自动在浏览器中打开。例如,open: true

  4. proxy:用于配置开发服务器代理的选项,用于将特定请求代理到另一个地址。这对于在开发过程中解决跨域问题非常有用。可以配置多个代理规则。一个常见的用法是将开发服务器代理到后端 API 服务器。例如:

    复制代码
    module.exports = {
      devServer: {
        proxy: {
          '/api': {
            target: 'http://backend-api.com',
            changeOrigin: true,
            pathRewrite: {
              '^/api': '',
            },
          },
        },
      },
    };
    ```
    
    上述示例中,`/api` 开头的请求将被代理到 `http://backend-api.com` 地址,并通过 `changeOrigin: true` 开启跨域请求。`pathRewrite` 选项用于重写请求路径。

这些选项可以根据你的项目需求进行配置,以满足特定的开发环境要求。你可以根据需要在 devServer 字段中进行相应的设置。

相关推荐
古一|38 分钟前
Vue3中ref与reactive实战指南:使用场景与代码示例
开发语言·javascript·ecmascript
peachSoda739 分钟前
封装一个不同跳转方式的通用方法(跳转外部链接,跳转其他小程序,跳转半屏小程序)
前端·javascript·微信小程序·小程序
@PHARAOH1 小时前
HOW - 浏览器兼容(含 Safari)
前端·safari
undefined在掘金390411 小时前
flutter 仿商场_首页
前端
少卿1 小时前
react-native图标替换
前端·react native
熊猫钓鱼>_>1 小时前
TypeScript前端架构与开发技巧深度解析:从工程化到性能优化的完整实践
前端·javascript·typescript
敲敲敲敲暴你脑袋1 小时前
Canvas绘制自定义流动路径
vue.js·typescript·canvas
JYeontu2 小时前
肉眼难以分辨 UI 是否对齐,写个插件来辅助
前端·javascript
fox_2 小时前
别再踩坑!JavaScript的this关键字,一次性讲透其“变脸”真相
前端·javascript
盛夏绽放2 小时前
uni-app Vue 项目的规范目录结构全解
前端·vue.js·uni-app