如何在Yew组件中读取服务器本地文件？问题求助

你遇到的请求/static/config.json返回index.html的问题，本质是静态文件服务配置错误或者路径不匹配，导致服务器将未匹配的请求统一转发到单页应用的入口文件index.html。以下是具体解决方法：

1. 确认静态文件存放路径 #

• 若使用Trunk构建Yew应用，静态文件必须放在项目根目录的static文件夹下（如static/config.json），Trunk会自动将该目录下的文件打包到输出目录的static路径中。
• 若用Axum、Warp等后端框架托管静态文件，需确保服务器配置的静态文件根目录与实际文件路径一致，且config.json确实存在于对应目录。

2. 验证请求路径正确性 #

打开浏览器开发者工具的Network标签，查看请求的完整URL和返回内容：

• 开发环境下，Trunk服务器的静态文件URL应为http://localhost:8080/static/config.json；若应用部署在子路径下，需添加对应前缀（如/app/static/config.json）。
• 确认请求的路径与服务器上文件的实际存储路径完全匹配。

3. 修正服务器路由配置 #

如果服务器采用单页应用的 fallback 配置（所有未匹配请求返回index.html），需为静态文件路径添加例外规则：
以Axum为例，需优先处理静态文件请求，再设置fallback：

use axum::{routing::get, Router};
use std::path::PathBuf;

#[tokio::main]
async fn main() {
    let app = Router::new()
        // 优先处理/static路径下的静态文件
        .nest_service("/static", axum::serve_static::ServeStatic::new(PathBuf::from("static")))
        // 其他请求返回index.html
        .fallback(get(|| async { include_str!("../dist/index.html") }));

    axum::Server::bind(&"0.0.0.0:3000".parse().unwrap())
        .serve(app.into_make_svc())
        .await
        .unwrap();
}

4. 沙箱环境下的替代方案：构建时注入配置 #

如果服务器处于沙箱环境无法读取本地文件，可以在构建阶段将配置内容注入到Yew代码中：

步骤1：编写build.rs脚本 #

在项目根目录创建build.rs，读取配置文件并设置为构建环境变量：

use std::fs;
use std::path::Path;

fn main() {
    let config_path = Path::new("config.json");
    let config_content = fs::read_to_string(config_path).expect("Failed to read config.json");
    println!("cargo:rustc-env=CONFIG_CONTENT={}", config_content);
}

步骤2：在Yew组件中读取配置 #

直接在组件中通过env!宏读取构建时注入的配置：

impl Component for MyComponent {
    // ... 其他代码保持不变

    fn create(ctx: &Context<Self>) -> Self {
        // 直接读取构建时注入的配置
        let config = Some(env!("CONFIG_CONTENT").to_string());
        Self { config }
    }

    // ... 其他代码保持不变
}

内容的提问来源于stack exchange，提问作者YaOo