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 为hashmode。应在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:
booleanobject: { 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
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/228077.html原文链接：https://javaforall.net
![Linux 硬盘分区生效命令partprobe[通俗易懂]](https://javaforall.net/wp-content/uploads/2020/11/2020110817443450-480x300.jpg)
