如何将Tauri启动命令参数传递至Next.js前端？

步骤1：修改Tauri后端代码捕获并传递参数 #

打开src-tauri/src/main.rs，添加参数解析逻辑和IPC接口，把命令行参数传递给前端：

use tauri::{Manager, State};
use serde::Serialize;

fn main() {
    let app = tauri::Builder::default()
        .invoke_handler(tauri::generate_handler![get_custom_param])
        .setup(|app| {
            // 解析命令行中的自定义参数
            let param_value = app.args()
                .iter()
                .find(|arg| arg.starts_with("--custom-param="))
                .map(|arg| arg.split('=').nth(1).unwrap_or_default().to_string())
                .unwrap_or_default();
            
            // 将参数存入全局状态，供IPC接口调用
            app.manage(CustomParam(param_value));
            Ok(())
        })
        .build(tauri::generate_context!())
        .expect("构建Tauri应用失败");

    app.run(|_app_handle, event| match event {
        tauri::RunEvent::ExitRequested { api, .. } => {
            api.prevent_exit();
        }
        _ => {}
    });
}

// 定义全局状态结构体
#[derive(Clone, Serialize)]
struct CustomParam(String);

// 定义IPC命令，供前端调用获取参数
#[tauri::command]
fn get_custom_param(state: State<'_, CustomParam>) -> String {
    state.0.clone()
}

步骤2：前端页面调用IPC获取参数 #

在src/app/page.tsx中，通过Tauri的IPC接口获取后端传递的参数：

'use client' // 必须添加该指令以使用客户端API

import { useEffect, useState } from 'react';
import { invoke } from '@tauri-apps/api/tauri';

export default function Home() {
    const [paramValue, setParamValue] = useState<string>('');

    useEffect(() => {
        const fetchParam = async () => {
            const value = await invoke<string>('get_custom_param');
            setParamValue(value);
        };
        fetchParam();
    }, []);

    return (
        <main>
            <h1>命令行参数值：{paramValue}</h1>
        </main>
    );
}

步骤3：执行带参数的启动命令 #

使用以下命令启动项目，参数会被正确传递到前端页面：

npm run tauri dev -- --custom-param=你的参数内容

注意：这里的--是用来告知npm将后续参数传递给Tauri命令，不可省略，否则参数会被npm拦截。

补充说明 #

• 若需要多个参数，可在main.rs中扩展参数解析逻辑，捕获多个--key=value格式的参数。
• 确保已安装@tauri-apps/api依赖，未安装可执行npm install @tauri-apps/api。

内容的提问来源于stack exchange，提问作者Résu