child_process在vite+vue3+ts中的用法

1. child_process是什么

child_process 模块是 Node.js 的一个核心模块，可以从 Node.js 应用程序中创建和管理子进程。 它可以执行系统命令、运行其他应用或执行 JavaScript 文件。

2. child_process创建子进程的7个api

1. spawn 执行命令
2. exec 执行命令
3. execFile 执行可执行文件
4. fork 创建node子进程
5. execSync 执行命令 同步执行
6. execFileSync 执行可执行文件 同步执行
7. spawnSync 执行命令 同步执行
   ps:有加Sync后缀的是同步API 没加的是异步API

3. exec方法在vue3+vite+ts项目中的使用

3.1 直接npm install child_process后，导入包无法使用

在 Vite + TypeScript + Vue3 项目中，由于浏览器环境不支持 child_process，如果希望在前端项目中直接调用 Node.js 的命令，可以通过 Vite 的 SSR 或者 Electron 环境 实现。如果不希望借助服务器或者 Electron 环境，可以利用 Vite 提供的 SSR 功能来创建一个接口来执行命令。

3.2 实现一个获取电脑设备码的功能

1）首先在项目中安装依赖

npm install child_process

2）然后创建一个ts文件，自定义一个插件

// 需要自定义一个插件
// vite-plugin-child-process.ts
import { exec } from 'child_process';
import type { Plugin } from 'vite';

export default function childProcessPlugin(): Plugin {
    return {
        name: 'vite-plugin-child-process',
        configureServer(server) {
            // 在 server.middlewares.use() 中明确插入自定义中间件
            server.middlewares.use((req, res, next) => {
                // 检查请求路径，确保它不会被代理
                if (req.url?.startsWith('/api/run-command')) {
                    const url = new URL(req.url || '', `http://${req.headers.host}`);
                    const command = url.searchParams.get('cmdStr');

                    if (command) {
                        exec(command, (error, stdout, stderr) => {
                            if (error) {
                                console.error('Execution Error:', error);
                                res.statusCode = 500;
                                res.end(`Execution Error: ${error.message}`);
                            } else if (stderr) {
                                console.error('Command Error:', stderr);
                                res.statusCode = 500;
                                res.end(`Command Error: ${stderr}`);
                            } else {
                                res.statusCode = 200;
                                res.end(stdout);
                            }
                        });
                    } else {
                        res.statusCode = 400;
                        res.end('No command provided');
                    }
                } else {
                    // 如果不是目标路径，则继续到下一个中间件（包括代理）
                    next();
                }
            });
        }
    };
}

3.3 在vite.config.ts中引入插件

// vite.config.ts
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import childProcessPlugin from './vite-plugin-child-process';

export default defineConfig({
  plugins: [
    vue(),
    childProcessPlugin()  // 引入自定义插件
  ]
});

3.4 vue组件使用方法

// 在 Vue 组件中，可以通过 HTTP 请求来调用这个插件暴露的 API
import { ref } from 'vue';
import axios from 'axios';

const deviceNumber = ref('')
async function getDeviceInfo(cmdStr) {
  try {
    const response = await axios.get(`/api/run-command?cmdStr=${encodeURIComponent(cmdStr)}`)
    if(response.data) {
      deviceNumber.value = response.data
    }
  } catch (error) {
    console.log('error======',error)
  }
}

// 调用方法
getDeviceInfo('wmic bios get serialnumber')

3.5 注意

1. 这种方式只能在开发环境中使用，因为在生产环境（浏览器端）无法直接使用 Node.js 模块。
2. Vite 开发服务器是在 Node.js 环境下运行的，所以可以支持 child_process，但浏览器端是无法直接访问的。
3. 不要在公开的生产环境中直接暴露这样的接口，可能会带来安全风险。