server 配置
// vite.config.js
import { defineConfig } from 'vite'
// https://vitejs.dev/config/
export default defineConfig({
server: {
origin: 'http://127.0.0.1:8080', //用于定义开发调试阶段生成资源的 origin
host: '0.0.0.0', // 监听所有可用的网络接口
port: 3000, // 设置端口号,可以根据需要修改
strictPort: true, //设为 true 时若端口已被占用则会直接退出,而不是尝试下一个可用端口
https: {
key: fs.readFileSync('./path/to/your/server.key'), // 使用 Node.js 的 fs 模块读取私钥文件 (服务器私钥的路径或内容)
cert: fs.readFileSync('./path/to/your/server.cert'), // 使用 Node.js 的 fs 模块读取证书文件 (服务器证书的路径或内容)
ca: fs.readFileSync('./XX/xx.cert'), //附加的 CA 证书的路径或内容数组,用于创建完整的证书链。
pfx: fs.readFileSync('./XX/xx.cert'),//或 pfxPath:包含私钥、证书和 CA 证书的 PFX 或 PKCS#12 编码的文件路径或内容。
passphrase:'XXXX'//用于证书的密码短语
},
open: 'google chrome', // 在开发服务器启动后自动打开 Google Chrome 浏览器
--或--open: true, // 在开发服务器启动后自动打开浏览器
--或--open: false, //默认值:false
proxy: { //开发服务器配置自定义代理规则
// 字符串简写写法:http://localhost:5173/foo -> http://localhost:4567/foo
'/foo': 'http://localhost:4567',
// 带选项写法:http://localhost:5173/api/bar --http://jsonplaceholder.typicode.com/bar
'/api': {
target: 'http://jsonplaceholder.typicode.com',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, ''),
},
// 正则表达式写法:http://localhost:5173/fallback/ -> http://jsonplaceholder.typicode.com/
'^/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' 的实例
}
},
// 代理 websockets 或 socket.io 写法:ws://localhost:5173/socket.io -> ws://localhost:5174/socket.io
'/socket.io': {
target: 'ws://localhost:5174',
ws: true,
},
},
cors: { // 选项用于配置跨域资源共享(CORS)策略
origin: ['http://localhost:3000', 'https://example.com'], // 允许来自这些源的请求
methods: ['GET', 'POST', 'OPTIONS'], // 允许的方法
allowedHeaders: ['Content-Type', 'X-Custom-Header'], // 允许的头
exposedHeaders: ['Custom-Exposed-Header'], // 暴露给客户端的响应头
credentials: true, // 允许携带凭据
maxAge: 86400, // 预检请求的有效期为 24 小时
},
headers: { //选项允许你为开发服务器添加自定义的 HTTP 响应头。这对于需要设置特定 HTTP 头的场景非常有用,比如设置安全相关的头(如 Content-Security-Policy)、缓存控制头(如 Cache-Control)或其他自定义头。
'Content-Security-Policy': "default-src 'self'; script-src 'self' 'unsafe-inline' https://cdn.example.com",
'Cache-Control': 'no-cache, no-store, must-revalidate',
'X-Custom-Header': 'custom value',
'X-Another-Header': (url, ctx) => {
// 根据请求 URL 或上下文动态设置头值
if (url.pathname === '/dynamic-header') {
return 'dynamic value';
}
return 'default value';
}
},
hmr: { //配置热模块替换(Hot Module Replacement,简称 HMR)的行为
// 使用 'wss' 协议(WebSocket Secure)
protocol: 'wss',
// 指定 HMR 服务器的主机名
hostname: 'localhost',
// 指定 HMR 服务器的端口号
port: 443,
// WebSocket 连接的路径
path: '/hmr',
// 设置超时时间为 5000 毫秒
timeout: 5000,
// 在出现错误时显示一个覆盖层
overlay: true,
// 当 HMR 更新失败时强制刷新页面
reload: true,
// 自定义 HMR 客户端的行为
client: {
// ...自定义配置
}
},
// warmup选项主要用于配置开发服务器的预热(warmup)行为。预热是 Vite 的一种特性,它会在开发服务器启动后,预先构建一些页面或资源,以便在后续请求时能够更快地响应。这有助于提高开发时的页面加载速度和响应性能。
warmup: 3, // 启用预热功能,并指定预热时需要访问的页面数量
--或--warmup: true, //Vite 会在开发服务器启动后自动进行预热
middlewareMode: true, // 启用中间件模式, 默认值:false
},
fs: {
strict: true, //限制为工作区 root 路径以外的文件的访问(自 Vite 2.7 起默认启用)
// 允许为项目根目录的上一级提供服务
allow: ['..']
--或--allow: [
// 搜索工作区的根目录
searchForWorkspaceRoot(process.cwd()),
// 自定义规则
'/path/to/custom/allow_directory',
'/path/to/custom/allow_file.demo',
],
},
// 这是默认值,它将把所有路径中含有 node_modules 的文件
// 添加到忽略列表中。
sourcemapIgnoreList(sourcePath, sourcemapPath) {
return sourcePath.includes('node_modules')
},
})
server.watch
在 Vite 中,server.watch 选项通常不是直接暴露给用户进行配置的,因为它涉及到 Vite 内部对文件系统的监视机制。然而,Vite 确实提供了一些与文件监视相关的配置选项,这些选项通常包含在 resolve、build 或其他配置部分中,而不是直接放在 server 配置下。
其中包含了一些与文件系统相关的配置
// vite.config.js
import { defineConfig } from 'vite'
export default defineConfig({
// ...其他配置...
resolve: {
alias: {
// 配置别名,影响哪些文件被 Vite 监视和构建
'/@/': '/src/',
},
},
// build 配置通常用于生产构建,但也会影响开发时的监视行为
build: {
rollupOptions: {
input: {
// 指定 Rollup 的输入文件,间接影响 Vite 监视的文件
main: 'src/main.js',
// ...其他入口点...
},
},
// 禁用依赖项预构建以提高启动速度(注意:这可能会降低后续构建的速度)
optimizeDeps: {
disabled: true,
},
// 指定构建缓存的目录
cacheDir: 'node_modules/.vite',
},
// ...其他配置...
})