Yew应用部署至GitHub Pages时静态文件访问异常的跨环境配置方案咨询

这个问题本质是基础路径不匹配：本地开发时静态资源从根路径/加载，而GitHub Pages部署在子路径/my-website/下，导致资源引用错位。下面给你几个实用的解决方案，覆盖本地开发和生产部署的场景：

方案1：动态获取基础路径（推荐，无需区分环境） #

利用浏览器的location.pathname动态判断当前环境的基础路径，这样代码无需修改就能适配两种环境。

写一个全局辅助函数来获取基础路径：

use web_sys::window;

fn get_base_path() -> String {
    // 获取当前页面的路径名
    let pathname = window()
        .expect("浏览器环境不支持")
        .location()
        .pathname()
        .expect("无法获取路径名");

    // 判断是否处于GitHub Pages的子路径下
    if pathname.starts_with("/my-website/") {
        "/my-website/".to_string()
    } else {
        "/".to_string()
    }
}

之后引用静态资源时，用这个函数拼接路径：

// 示例：引用图片
let logo_url = format!("{}static/images/logo.png", get_base_path());
// 示例：引用CSS
let style_url = format!("{}static/styles/main.css", get_base_path());

这种方式的好处是，无论本地开发还是部署到GitHub Pages，代码都会自动适配路径，不需要额外的编译配置。

方案2：编译时注入环境变量（适合严格区分环境的场景） #

通过Rust的条件编译，在开发和生产环境分别注入不同的基础路径常量。

步骤1：配置Cargo编译参数 #

在你的Cargo.toml中添加不同profile的编译标识：

[profile.dev]
# 开发环境注入dev标识
rustflags = ["--cfg", 'env="dev"']

[profile.release]
# 生产环境注入prod标识
rustflags = ["--cfg", 'env="prod"']

步骤2：在代码中使用条件常量 #

// 生产环境（GitHub Pages）使用子路径
#[cfg(env = "prod")]
const BASE_PATH: &str = "/my-website/";

// 开发环境使用根路径
#[cfg(env = "dev")]
const BASE_PATH: &str = "/";

// 引用静态资源
let font_url = format!("{}static/fonts/roboto.ttf", BASE_PATH);

步骤3：对应环境的构建命令 #

• 本地开发：trunk serve（自动使用dev profile，根路径）
• 生产构建：trunk build --release --public-url /my-website/（使用prod profile，同时告诉trunk资源的基础路径）

关键补充：用Trunk模拟GitHub Pages环境测试 #

本地开发时，如果你想提前验证子路径下的资源加载是否正常，可以用Trunk的--public-url参数模拟：

trunk serve --public-url /my-website/

这样本地预览的URL会变成http://localhost:8080/my-website/，和GitHub Pages的路径结构完全一致，能提前发现问题。

部署注意事项 #

1. 确保你的静态资源都放在项目根目录的static文件夹下，Trunk会自动处理这些资源的打包路径。
2. 部署到GitHub Pages时，把Trunk构建生成的dist目录下的所有文件上传到仓库的gh-pages分支（或者用GitHub Actions自动完成这个步骤）。

这样配置后，你的Yew应用就能在本地和GitHub Pages环境下都正常加载静态文件了。

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