脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue.config.js的devserver配置

vue.config.js里面的devserver如何配置

 更新时间：2025年01月23日 10:56:37   作者：Flamingo_huohuo  
本文介绍了vue.config.js中devServer的常见配置方式,包括基本配置、代理配置、热模块替换、静态资源服务、HTTPS配置、多代理配置以及其他配置项,帮助开发者根据项目需求进行定制

vue.config.js的devserver配置方式

以下是 vue.config.js 中 devServer 的常见配置方式，以及不同配置项的解释和使用场景：

1. 基本配置

在 Vue 项目中，vue.config.js 是一个可选的配置文件，用于自定义 Vue CLI 的内部 Webpack 配置。

以下是一个简单的 devServer 配置示例：

module.exports = {
  devServer: {
    port: 8080, // 开发服务器的端口号
    open: true, // 项目启动时自动打开浏览器
    overlay: {
      warnings: false,
      errors: true // 在浏览器中显示错误信息
    }
  }
};

解释：

  • port：指定开发服务器运行的端口号。如果不设置，默认为 8080。
  • open：设置为 true 时，项目启动时会自动打开浏览器并访问开发服务器的页面。
  • overlay：控制是否在浏览器页面上覆盖显示警告和错误信息。将 errors 设置为 true 会在页面上显示编译错误，方便开发时快速定位问题。

2. 代理配置

使用 devServer 配置代理是解决开发环境中跨域问题的常用方法。

假设你需要将 /api 开头的请求代理到 http://localhost:3000 上的后端服务器，可以这样配置：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000', // 目标服务器地址
        changeOrigin: true, // 修改请求头中的 Origin 信息
        pathRewrite: {
          '^/api': '' // 重写请求路径，将 /api 替换为空
        }
      }
    }
  }
};

解释：

  • proxy：设置请求代理。
  • '/api'：匹配以 /api 开头的请求路径。
  • target：将请求代理到的目标服务器地址。
  • changeOrigin：将请求头中的 Origin 字段修改为目标服务器的地址，有助于绕过某些服务器的同源策略限制。
  • pathRewrite：重写请求路径，这里将 /api 前缀去掉，使请求路径符合后端 API 的实际情况。

3. 热模块替换（HMR）

启用热模块替换可以在不刷新页面的情况下更新代码，提升开发体验：

module.exports = {
  devServer: {
    hot: true, // 启用热模块替换
    hotOnly: true // 只使用热更新，不刷新页面
  }
};

解释：

  • hot：启用热模块替换。
  • hotOnly：当热模块替换失败时，不刷新页面，避免页面刷新导致的数据丢失或状态重置。

4. 静态资源服务

可以配置 devServer 来处理静态资源服务：

module.exports = {
  devServer: {
    contentBase: './public', // 静态资源的目录
    watchContentBase: true // 监听静态资源目录的变化
  }
};

解释：

  • contentBase：指定静态资源的目录，默认为 public 目录。
  • watchContentBase：设置为 true 时，当静态资源目录中的文件发生变化时，开发服务器会重新加载。

5. 启用 HTTPS

如果需要在开发环境中使用 HTTPS，可以配置 devServer 如下：

const fs = require('fs');
const path = require('path');

module.exports = {
  devServer: {
    https: {
      key: fs.readFileSync(path.join(__dirname, 'key.pem')), // 私钥文件
      cert: fs.readFileSync(path.join(__dirname, 'cert.pem')) // 证书文件
    }
  }
};

解释：

  • https：使用 HTTPS 协议，需要提供私钥和证书文件。

6. 配置多个代理

如果你需要将不同的请求代理到不同的后端服务器，可以使用多个代理配置：

module.exports = {
  devServer: {
    proxy: {
      '/api1': {
        target: 'http://localhost:3001',
        changeOrigin: true
      },
      '/api2': {
        target: 'http://localhost:3002',
        changeOrigin: true
      }
    }
  }
};

7. 其他配置

还可以配置其他 devServer 选项，如 headers 用于设置响应头，compress 用于启用 Gzip 压缩：

module.exports = {
  devServer: {
    headers: {
      'Access-Control-Allow-Origin': '*' // 允许跨域请求
    },
    compress: true // 启用 Gzip 压缩
  }
};

心得：

vue.config.js 中的 devServer 配置项非常灵活，可以根据开发需求进行各种定制。

以下是一个综合的 vue.config.js 示例：

const fs = require('fs');
const path = require('path');

module.exports = {
  devServer: {
    port: 8080,
    open: true,
    overlay: {
      warnings: false,
      errors: true
    },
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    },
    hot: true,
    hotOnly: true,
    contentBase: './public',
    watchContentBase: true,
    https: {
      key: fs.readFileSync(path.join(__dirname, 'key.pem')),
      cert: fs.readFileSync(path.join(__dirname, 'cert.pem'))
    },
    headers: {
      'Access-Control-Allow-Origin': '*'
    },
    compress: true
  }
};

总结

以上就是 vue.config.js 中 devServer 的常见配置，你可以根据项目的实际需求进行选择和修改，以满足开发过程中的不同需求。

这些仅为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • Vue 3 动态 ref 的使用方式以表格为列

    Vue 3 动态 ref 的使用方式以表格为列

    我正在开发的项目中,有一个表格组件,其中一列是分镜描述,需要支持视频上传功能,下面给大家介绍Vue 3动态ref的使用方式以表格为列给大家详细讲解,感兴趣的朋友一起看看吧
    2023-07-07
  • Vue+ElementUI之Tree的使用方法

    Vue+ElementUI之Tree的使用方法

    这篇文章主要为大家详细介绍了Vue+ElementUI之Tree的使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-05-05
  • 解决element ui el-row el-col里面高度不一致问题

    解决element ui el-row el-col里面高度不一致问题

    这篇文章主要介绍了解决element ui el-row el-col里面高度不一致问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-08-08
  • Vue组件通信深入分析

    Vue组件通信深入分析

    对于vue来说，组件之间的消息传递是非常重要的，用vue可以是要组件复用的，而组件实例的作用域是相互独立，这意味着不同组件之间的数据无法互相引用，一般来说，组件之间可以有几种关系，下面是我对组件之间消息传递的常用方式的总结
    2022-08-08
  • 解决vue+router路由跳转不起作用的一项原因

    解决vue+router路由跳转不起作用的一项原因

    这篇文章主要介绍了解决vue+router路由跳转不起作用的一项原因，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • vue中Npm run build 根据环境传递参数方法来打包不同域名

    vue中Npm run build 根据环境传递参数方法来打包不同域名

    这篇文章主要介绍了vue项目中Npm run build 根据环境传递参数方法来打包不同域名,使用npm run build --xxx，根据传递参数xxx来判定不同的环境，给出不同的域名配置，具体内容详情大家参考下本文
    2018-03-03
  • vue同一个浏览器登录不同账号数据覆盖问题解决方案

    vue同一个浏览器登录不同账号数据覆盖问题解决方案

    同一个浏览器登录不同账号session一致,这就导致后面登录的用户数据会把前面登录的用户数据覆盖掉,这个问题很常见,当前我这边解决的就是同一个浏览器不同窗口只能登录一个用户,对vue同一个浏览器登录不同账号数据覆盖问题解决方法感兴趣的朋友一起看看吧
    2024-01-01
  • 微信小程序如何像vue一样在动态绑定类名

    微信小程序如何像vue一样在动态绑定类名

    这篇文章主要介绍了微信小程序如何像vue一样在动态绑定类名,文中给大家提到了vue与微信小程序的区别，需要的朋友可以参考下
    2018-04-04
  • 深入探究Vue中三种不同的props用法

    深入探究Vue中三种不同的props用法

    Vue 的核心功能之一在于 props 的使用,props 是我们在 Vue 中从父组件到子组件传递数据的方式,但并非所有 props 都是一样的,本文我们会深入学习这三种不同类型的 props,看看它们有何不同,以及何时使用它们,需要的朋友可以参考下
    2024-03-03
  • Vue中使用防抖与节流的方法

    Vue中使用防抖与节流的方法

    这篇文章主要为大家介绍了Vue中使用防抖与节流的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
    2022-01-01

最新评论