configuration-vue.config.js devServer配置

1.vue.config.js

在 Vue CLI 项目中，vue.config.js 文件用于配置 Vue 项目的各种选项。其中，devServer 配置允许你自定义开发服务器的行为。

2.基本配置

module.exports = {  
  devServer: {  
    // 开发服务器的地址  
    host: '0.0.0.0', // 默认为 localhost  
    port: 8080,      // 默认为 8080  
  
    // 是否启用 https  
    https: false,  
  
    // 是否自动打开浏览器  
    open: true,  
  
    // 代理配置  
    proxy: {  
      '/api': {  
        target: 'http://localhost:5000', // 目标服务器地址  
        changeOrigin: true,              // 是否允许跨域  
        pathRewrite: { '^/api': '' },    // 重写路径  
      },  
      '/auth': {  
        target: 'http://auth.example.com',  
        changeOrigin: true,  
      },  
    },  
  
    // 可以在开发服务器中使用 before 命令钩子  
    before: function (app, server) {  
      // app 是一个 express 实例  
      // server 是 http 服务器实例  
      console.log('开发服务器启动中...');  
    },  
  
    // 可以在开发服务器中使用 after 命令钩子  
    after: function (app, server) {  
      console.log('开发服务器已启动');  
    },  
  
    // 是否启用热重载  
    hot: true,  
  
    // 热重载的接口前缀  
    hotOnly: false,  
  
    // 开发服务器的头部信息  
    headers: {  
      'Access-Control-Allow-Origin': '*',  
    },  
  
    // 静态文件目录  
    static: './public',  
  
    // 监听的文件变动  
    watchOptions: {  
      poll: 1000, // 每秒轮询一次  
    },  
  
    // 是否启用压缩  
    compress: true,  
  
    // 客户端日志输出的级别  
    clientLogLevel: 'warning',  
  
    // 是否显示编译进度  
    progress: true,  
  
    // 覆盖 webpack-dev-middleware 的设置  
    devMiddleware: {  
      stats: 'errors-only',  
    },  
  
    // 覆盖 webpack-hot-middleware 的设置  
    hotMiddleware: {},  
  
    // 是否在浏览器控制台显示构建错误  
    overlay: {  
      errors: true,  
      warnings: false,  
    },  
  
    // 代理配置的其他选项  
    proxyOptions: {  
      // 代理请求的超时时间  
      timeout: 5000,  
    },  
  },  
};

• host: 指定开发服务器的主机地址。设置为 '0.0.0.0' 可以让其他设备访问你的开发服务器。

• port: 开发服务器的端口号。

• https: 是否启用 HTTPS。

• open: 是否在启动开发服务器时自动打开浏览器。

• proxy: 代理配置，用于解决开发环境中跨域请求的问题。

• before/after: 在开发服务器启动前后执行的钩子函数。

• hot: 是否启用热重载（模块热替换）。

• hotOnly: 仅启用热重载，禁用浏览器刷新。

• headers: 为所有响应添加 HTTP 头部。

• static: 静态文件的目录。

• watchOptions: 文件系统监控选项。

• compress: 是否启用 gzip 压缩。

• clientLogLevel: 控制台日志输出的级别。

• progress: 是否显示编译进度。

• devMiddleware: 覆盖 webpack-dev-middleware 的设置。

• hotMiddleware: 覆盖 webpack-hot-middleware 的设置。

• overlay: 是否在浏览器控制台显示构建错误和警告。

• proxyOptions: 代理配置的其他选项，如超时时间。

3.注意 

1. 代理配置：使用代理配置时，要确保目标服务器地址正确，并且 changeOrigin 和 pathRewrite 等选项设置合理。

2. 安全性：在生产环境中不要启用 devServer 配置，这些配置仅用于开发环境。

3. 热重载：热重载可以显著提升开发效率，但有时候可能会引入一些调试上的困难。

原文地址：https://blog.csdn.net/2301_76671906/article/details/142917549

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！