vite.config.js 开发服务器配置
2022-02-22 本文已影响0人
small_zeo
1. server.host
- 类型：
string | boolean - 默认：
127.0.0.1
指定服务器应该监听哪个 IP 地址。 如果将此设置为 0.0.0.0 或者 true 将监听所有地址，包括局域网和公网地址。
2. server.port
- 类型：
number - 默认值：
3000
指定开发服务器端口。注意：如果端口已经被使用，Vite 会自动尝试下一个可用的端口，所以这可能不是开发服务器最终监听的实际端口。
3. server.strictPort
- 类型：
boolean
设为true时若端口已被占用则会直接退出，而不是尝试下一个可用端口。
4. server.https
- 类型：
boolean | https.ServerOptions
启用 TLS + HTTP/2。注意：当server.proxy选项 也被使用时，将会仅使用 TLS。
(TLS是具https:// URL时使用的协议，并且在现代浏览器中使用HTTP/2是必需的。主要出于性能原因，在测试应用程序时使用这些协议很有用。)
主要出于性能原因，在测试应用程序时使用这些协议很有用。
5. server.open
- 类型：
boolean | string
服务器启动时自动在浏览器中打开应用程序。
当此值为字符串时，会被用作 URL 的路径名。
若你想指定喜欢的浏览器打开服务器，你可以设置环境变量 process.env.BROWSER（例如：chrome）。
6. server.proxy
- 类型：
Record<string, string | ProxyOptions>
为开发服务器配置自定义代理规则。
期望接收一个 { key: options } 对象。
如果 key 值以 ^ 开头，将会被解释为 RegExp。
configure 可用于访问 proxy 实例。
7. server.cors
- 类型：
boolean | CorsOptions
为开发服务器配置 CORS。默认启用并允许任何源，传递一个 选项对象 来调整行为或设为false表示禁用。
8. server.force
- 类型：
boolean
设置为 true 强制使依赖预构建。
9. server.hmr
- 类型：
boolean | { protocol?: string, host?: string, port?: number, path?: string, timeout?: number, overlay?: boolean, clientPort?: number, server?: Server }
禁用或配置 HMR 连接（用于 HMR websocket 必须使用不同的 http 服务器地址的情况）。
设置 server.hmr.overlay 为 false 可以禁用开发服务器错误的屏蔽。
10. server.watch
- 类型：
object
Vite 服务器默认会忽略对 .git/ 和 node_modules/ 目录的监听。如果你需要对 node_modules/ 内的包进行监听，你可以为 server.watch.ignored 赋值一个取反的 glob 模式，例如：
export default {
server: {
watch: {
ignored: ['!**/node_modules/your-package-name/**']
}
},
// 被监听的包必须被排除在优化之外，
// 以便它能出现在依赖关系图中并触发热更新。
optimizeDeps: {
exclude: ['your-package-name']
}
}
示例：
export default {
server: {
host: true,
port: '7005',
strictPort: true,
open: true,
proxy: {
// 字符串简写写法
'/foo': 'http://localhost:4567',
// 选项写法
'/api': {
target: 'http://jsonplaceholder.typicode.com',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, '')
},
// 正则表达式写法
'^/fallback/.*': {
target: 'http://jsonplaceholder.typicode.com',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/fallback/, '')
},
// 使用 proxy 实例
'/api': {
target: 'http://jsonplaceholder.typicode.com',
changeOrigin: true,
configure: (proxy, options) => {
// proxy 是 'http-proxy' 的实例
}
}
}
}
};
