ZhenYu's 知识库

外观

SVRX 工具

约 714 字大约 2 分钟

SVRXServer-X开发服务器

2026-04-15

概述

SVRX（Server-X）是一个可编程的本地开发服务器框架，通过插件系统提供强大的扩展能力。

核心特性

  • 插件化: 丰富的插件生态，按需加载
  • 可配置: 灵活的配置文件
  • 多协议: 支持 HTTP/HTTPS/WebSocket
  • 热更新: 支持文件修改热重载
  • 代理: 内置请求代理功能

安装

# 全局安装
npm install -g svrx

# 或使用 npx
npx svrx

快速开始

# 在项目目录运行
svrx

# 访问 http://localhost:8000

配置文件

// svrx.config.js
module.exports = {
  port: 3000,
  root: './dist',
  plugins: [
    'svrx-plugin-livereload',
    'svrx-plugin-proxy',
    'svrx-plugin-mock',
  ],
};

常用插件

svrx-plugin-livereload

热重载插件：

// 自动检测文件变化并刷新浏览器
plugins: [
  'svrx-plugin-livereload',
];

// 或配置
{
  port: 35729,
  delay: 300,
  ignore: /\.git\//,
}

svrx-plugin-proxy

代理插件：

plugins: [
  ['svrx-plugin-proxy', {
    '/api': {
      target: 'https://api.example.com',
      changeOrigin: true,
      secure: false,
    },
  }],
];

svrx-plugin-open

自动打开浏览器：

plugins: [
  ['svrx-plugin-open', {
    browser: 'Chrome',
    path: '/',
  }],
];

svrx-plugin-mock

本地 Mock 插件：

plugins: [
  ['svrx-plugin-mock', {
    // 延迟
    delay: 1000,
    // Mock 规则
    rules: {
      'GET /api/user': { name: 'Alice', age: 18 },
      'POST /api/user': { success: true },
    },
  }],
];

svrx-plugin-https

HTTPS 支持：

plugins: [
  ['svrx-plugin-https', {
    cert: './ssl/server.crt',
    key: './ssl/server.key',
  }],
];

命令行使用

# 指定端口
svrx --port 3000

# 指定根目录
svrx --root ./dist

# 指定配置文件
svrx --config svrx.prod.config.js

# 开启 SSL
svrx --https

# 关闭日志
svrx --silent

# 打开浏览器
svrx --open

# 自定义插件
svrx --plugin ./my-plugin.js

常用配置

// svrx.config.js
module.exports = {
  port: 3000,
  root: './src',
  log: {
    level: 'info',
    timestamp: true,
  },
  plugins: [
    // 基础插件
    'svrx-plugin-livereload',

    // 代理配置
    ['svrx-plugin-proxy', {
      '/api': 'http://localhost:8080',
      '/ws': {
        target: 'ws://localhost:8081',
        ws: true,
      },
    }],

    // Mock 配置
    ['svrx-plugin-mock', {
      rules: {
        'GET /api/users': (req, res) => [{
          id: 1,
          name: 'User 1',
        }],
      },
    }],

    // 自定义中间件
    (svrx) => {
      svrx.router.get('/custom', (ctx) => {
        ctx.body = { message: 'Hello' };
      });
    },
  ],
};

中间件开发

// my-plugin.js
module.exports = (svrx) => {
  // 添加路由
  svrx.router.get('/hello', (ctx) => {
    ctx.body = 'Hello World';
  });

  // 添加静态文件
  svrx.static('./public');

  // 拦截请求
  svrx.intercept('text:*', (ctx) => {
    console.log('Request:', ctx.request.url);
  });

  // 返回配置
  return {
    name: 'my-plugin',
    viewport: 'mobile',
  };
};

与其他工具对比

特性SVRXwebpack-dev-serverVite
配置方式JS 配置webpack 配置Vite 配置
插件系统插件生态loader/pluginVite 插件
启动速度快较慢极快
HMR基于文件监听基于 webpack基于 ESM
Mock 支持内置插件需额外配置需额外配置

使用场景

1. 多页面应用

module.exports = {
  root: './src',
  plugins: [
    'svrx-plugin-livereload',
    ['svrx-plugin-proxy', {
      '/api': 'http://localhost:8080',
    }],
  ],
};

2. 前后端并行开发

module.exports = {
  port: 3000,
  plugins: [
    ['svrx-plugin-mock', {
      delay: 500,
      rules: {
        'GET /api/users': require('./mock/users'),
        'POST /api/users': require('./mock/createUser'),
      },
    }],
  ],
};

3. 静态站点预览

module.exports = {
  root: './dist',
  plugins: [
    'svrx-plugin-livereload',
    ['svrx-plugin-https', {
      cert: './ssl/cert.pem',
      key: './ssl/key.pem',
    }],
  ],
};

常见问题

问题解决方案
端口被占用svrx --port 3001 更换端口
代理不生效检查 changeOrigin 配置
热更新不工作确认插件加载顺序
Mock 不生效检查规则路径匹配

相关资源