关于 VueCli中 devserve

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
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.10:3000'
     }
  }
};

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