Vue CLI40 webpack配置属性devServer,vue项目webpack配置文件

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 | stringDefault: true作用：用于设置代码保存时是否自动刷新页面。用法： module.exports = { devServer: { inline: true }} devServer.hot Type: boolean | stringDefault: true作用：用于设置代码保存时是否进行热更新（局部刷新，不刷新整个页面）。用法： module.exports = { devServer: { hot: true }} devServer.open Type: boolean | stringDefault: 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 Type: stringDefault: 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.10:3000' } }};

注意：在Vue CLI 4.0 使用devServer.proxy 一定要设置 target。

文章跳转 上一篇：Vue CLI4.0 webpack配置属性——css.requireModuleExtension、css.loaderOptions下一篇：Vue CLI4.0 webpack配置属性——devServer.proxy