webpack配置属性——devServer

deepCode
3,722 阅读3分钟

devServer
Type: Object
作用:通过devServer，可以在NodeJs架设起临时的服务器用于项目的运行与调试。

用法

module.exports = {
  // webpack-dev-server 相关配置
  devServer: {
    open: true,
    inline: true,
    host: '0.0.0.0', // 允许外部ip访问
    port: 8024, // 端口
    https: false, // 启用https
  }
}

扩展

devServer存在许多属性，通过来自 webpack-dev-server 的这些属性，能够用多种方式改变devServer行为。

下面将介绍一些常用的属性:

devServer.inline
Type: boolean | string
Default: true
作用：用于设置代码保存时是否自动刷新页面。
用法：\

module.exports = {
  devServer: {
    inline: true
  }
}

devServer.hot
Type: boolean | string
Default: true
作用：用于设置代码保存时是否进行热更新（局部刷新，不刷新整个页面）。
用法：

module.exports = {
  devServer: {
    hot: true
  }
}

devServer.open
Type: boolean | string
Default: false
作用：用于设置 server 启动后是否自动打开浏览器。
用法：

module.exports = {
  devServer: {
    open: true
  }
}

devServer.openPage
Type: string
作用: 指定deserver 编译完成后自动打开的页面
用法：

module.exports = {
  devServer: {
    open: true,
    openPage: '/different/page'
  }
};

注意：需要配合 open来使用。如果Vue router 为 hash mode。应在url前面补上/#。如：openPage: '/#/about'

devServer.https
Type: boolean | object
Default: false
作用：用于设置是否启用https
用法：

module.exports = {
  devServer: {
    https: true
  }
}

devServer.port
Type: number
作用: 指定要监听请求的端口号
用法：

module.exports = {
  devServer: {
    port: 8080
  }
}

devServer.host
host表示主机
Type: string
Default: localhost
作用：用于指定devDerve使用的host。如果你希望服务器外部可以访问，设定如下：

module.exports = {
  devServer: {
    host: '0.0.0.0'
  }
};

devServer.compress
Type: boolean
作用：对devServer 所有服务启用 gzip 压缩。
用法:

module.exports = {
  devServer: {
    compress: true
  }
};

注： gzip 压缩 用于减少服务器向前端传输的数据量，提高浏览的速度。

devServer.headers
Type: object
作用: 在所有响应中添加首部内容
用法：

module.exports = {
  devServer: {
    headers: {
      'X-Custom-Foo': 'bar'
    }
  }
};

devServer.overlay
Type: boolean object: { boolean errors, boolean warnings }
作用：当出现编译器错误或警告时，在浏览器中显示全屏覆盖层。默认禁用。
用法：
其一：显示编译器错误

module.exports = {
  devServer: {
    overlay: true
  }
};

其二：示警告和错误

module.exports = {
  devServer: {
    overlay: {
      warnings: true,
      errors: true
    }
  }
};

devServer.proxy
Type: object [object, function]

作用: 设置API访问代理。如果你有单独的后端开发服务器 API，并且希望在同域名下发送 API 请求 ，那么代理某些 URL 会很有用。

用法

module.exports = {
  proxy: {
        '/api': {
        target: 'http://127.0.0.1:8080'
     }
  }
};

vue.config.js配置

module.exports = {
    devServer: {
        open: true, //用于设置 server 启动后是否自动打开浏览器
        inline: true, //代码保存自动刷新页面
        // hot: true, //用于设置代码保存时是否进行热更新（局部刷新，不刷新整个页面）
        // openPage: '/different/page', //指定deserver 编译完成后自动打开的页面
        // https: true, //用于设置是否启用https
        // compress: true, //对devServer 所有服务启用 gzip 压缩
        // headers: {'X-Custom-Foo': 'bar'}, //在所有响应中添加首部内容
        // host: '0.0.0.0', //用于指定devDerve使用的host，如果你希望服务器外部可以访问，设定如 host: '0.0.0.0'
        host: '0.0.0.0', //用于指定devDerve使用的host，如果你希望服务器外部可以访问，设定如 host: '0.0.0.0'
        // port: 8080,
        proxy: {
            '/monitor': {
                secure: false, //默认情况下，不接受运行在 HTTPS 上，且使用了无效证书的后端服务器。如果你想要接受，只要设置 secure: false 就行
                changeOrigin: true, //changeOrigin参数设置为true, 本地就会虚拟一个服务器接收你的请求并代你发送该请求
                target: 'http://192.168.2.8:8012/monitor',
                pathRewrite: { //重写路径，不需要代理到api的接口
                    '^/monitor': ''
                }
            },
        }
    },
    // 打包时不生成.map文件 避免看到源码
    productionSourceMap: false,
}
avatar
文章
阅读
粉丝