在 Vue CLI 项目中,devServer
配置用于设置开发服务器的行为。这包括了开发服务器的端口、主机名、是否开启 HTTPS、自动打开浏览器等设置,以及配置代理规则来解决跨域问题。
devServer 配置详解(version >= 4.0.0)
-
host
: 设置开发服务器的主机地址,默认为'localhost'
。 -
port
: 设置开发服务器的端口号,默认为 8080。 -
https
: 设置是否使用 HTTPS 协议,默认为false
。 -
hot
: 是否启用 HMR(Hot Module Replacement)。默认值为true
。 -
open
: 设置是否在启动服务器时自动打开浏览器,默认为false
。 -
client
: 浏览器端运行的一些脚本,这些脚本负责与webpack-dev-server
通信。logging
: 允许在浏览器中设置日志级别,'log'
,'info'
,'warn'
,'error'
,'none'
,'verbose'
。overlay
: 是否显示全屏的错误/警告覆盖层。 默认值为{ warnings: true, errors: true }
。progress
: 是否显示构建进度条。默认值为 true。reconnect
: 告诉 dev-server 它应该尝试重新连接客户端的次数。当为true
时,它将无限次尝试重新连接(v4.4.0+
)。webSocketURL
: 这个选项允许指定 URL 到web socket
服务器(当你代理开发服务器和客户端脚本不总是知道连接到哪里时很有用)例:webSocketURL: 'ws://0.0.0.0:8080/ws'
。webSocketTransport
: 该配置项允许我们为客户端单独选择当前的 devServer 传输模式,或者提供自定义的客户端实现。这允许指定浏览器或其他客户端与 devServer 的通信方式。
为
webSocketServer
设置'ws'
或者'sockjs'
是一个设置devServer.client.webSocketTransport
和devServer.webSocketServer
的快捷方式。 -
liveReload
: 默认情况下,当监听到文件变化时dev-server
将会重新加载或刷新页面。为了liveReload
能够生效,devServer.hot
配置项必须禁用或者devServer.watchFiles
配置项必须启用。将其设置为false
以禁用devServer.liveReload
-
headers
: 为所有 HTTP 添加响应头。例如{ 'X-Custom-Header': 'value' }
。 -
server
: 允许设置服务器和配置项'http'
,'https'
,'spdy'
(默认为'http'
,v4.4.0+
)。 -
compress
: 是否启用 gzip 压缩。默认值为true
。 -
webSocketServer
: 该配置项允许我们选择当前的 web-socket 服务器或者提供自定义的 web-socket 服务器实现, 配置项false
,'sockjs'
,'ws'
(默认为'ws'
)。该模式使用ws
作为服务器,客户端中的WebSockets
。 -
proxy
: 设置代理规则,用于解决开发环境下的跨域问题。target
: 代理的目标地址,即后端 API 的地址。changeOrigin
: 是否改变源,设置为true
会使 Origin 请求头中的主机名变为目标 URL 的主机名。pathRewrite
: 重写路径,用于替换请求路径中的某些部分。secure
: 是否验证 SSL 证书。默认值为true
。logLevel
: 代理的日志级别。可选值为'debug'
,'info'
,'warn'
,'error'
。默认值为'warn'
。ws
: 是否代理websockets
。默认值为false
。router
: 路由规则,用于根据请求路径重定向代理。context
: 匹配条件,可以是正则表达式或字符串数组。bypass
: 一个函数,返回一个 URL 字符串或false
。如果返回 URL,则直接请求该 URL;如果返回false
,则使用代理。
其他配置
contentBase
: 开发服务器提供的静态文件目录。默认值为public
目录。historyApiFallback
: 是否启用 HTML5 history API 的回退。默认值为true
。before
: 在服务器启动之前执行的函数,可以用来注册中间件。after
: 在服务器启动之后执行的函数,可以用来注册中间件。setupMiddlewares
: 是否设置中间件。默认值为true
。
示例:
module.exports = {
devServer: {
host: '0.0.0.0', // 让你的服务器可以被外部访问
port: 8080, // 端口
https: false, // 不使用 HTTP 提供服务
hot: true, // 模块热替换
open: true, // 打开浏览器
client:{
overlay: { // 当出现编译错误或警告时,在浏览器中显示全屏覆盖。
warnings: true,
errors: true
},
progress: true, // 在浏览器中以百分比形式打印编译进度。
},
headers: { // 设置请求头
'X-Custom-Header': 'value'
},
compress: true, // 启用 gzip 压缩
proxy: {
'/api': { // 对 /api 的请求会将请求代理到 http://localhost:4000。
target: 'http://localhost:4000',
changeOrigin: true, // 使 Origin 请求头中的主机名变为目标 URL 的主机名
secure: false, // 不验证 SSL 证书
logLevel: 'warn', // 代理的日志级别
ws: true, // 使用 WebSockets 作为服务器
pathRewrite: { // 重写路径
'^/api': ''
},
router: function(req) {
if (req.url.startsWith('/api')) {
return '/api';
}
return false;
},
context: ['/api'],
bypass: function(req) {
if (req.headers.accept.indexOf('html') !== -1) {
return '/index.html';
}
}
}
},
contentBase: './public', // 开发服务器提供的静态文件目录
historyApiFallback: true, // 是否启用 HTML5 history API 的回退
before: function(app, server) {
// 在服务器启动之前执行的函数
},
after: function(app, server) {
// 在服务器启动之后执行的函数
},
setupMiddlewares: true, // 设置中间件
}
};