如何为Yew应用配置开发、预发布、生产环境的构建流程？

下面是三种实用的实现方式，覆盖不同场景需求：

方法一：环境变量注入 + Trunk 命令 #

适合CI/CD或需要灵活切换地址的场景，通过环境变量传递API地址，代码中动态读取。

1. 代码中读取环境变量 #

在src/config.rs中定义配置结构体：

pub struct AppConfig {
    pub api_base_url: String,
}

impl AppConfig {
    pub fn new() -> Self {
        // 读取环境变量，默认用本地开发地址
        let api_base_url = std::env::var("API_BASE_URL")
            .unwrap_or_else(|_| "http://localhost:8080/api".to_string());
        
        Self { api_base_url }
    }
}

组件中调用配置：

use crate::config::AppConfig;

#[function_component(App)]
pub fn app() -> Html {
    let config = AppConfig::new();
    html! {
        <div>{"当前API地址: "}{&config.api_base_url}</div>
    }
}

2. 不同环境的构建命令 #

直接通过环境变量前缀启动命令：

• 开发环境：
  API_BASE_URL=http://dev-api.example.com/api trunk serve
• 预发布环境：
  API_BASE_URL=http://staging-api.example.com/api trunk build --release
• 生产环境：
  API_BASE_URL=https://prod-api.example.com/api trunk build --release

嫌敲命令麻烦可以写shell脚本，比如build-dev.sh：

#!/bin/bash
export API_BASE_URL=http://dev-api.example.com/api
trunk serve

赋予执行权限后直接运行：chmod +x build-dev.sh && ./build-dev.sh

方法二：Cargo特性条件编译 #

适合编译时固定环境配置的场景，通过Cargo特性标记区分环境。

1. 在Cargo.toml中声明特性 #

[features]
default = ["dev"]  # 默认构建为开发环境
dev = []
staging = []
prod = []

2. 代码中根据特性配置地址 #

src/config.rs：

pub struct AppConfig {
    pub api_base_url: String,
}

impl AppConfig {
    pub fn new() -> Self {
        #[cfg(feature = "prod")]
        let api_base_url = "https://prod-api.example.com/api".to_string();
        
        #[cfg(feature = "staging")]
        let api_base_url = "http://staging-api.example.com/api".to_string();
        
        #[cfg(feature = "dev")]
        let api_base_url = "http://localhost:8080/api".to_string();
        
        Self { api_base_url }
    }
}

3. 对应环境的构建命令 #

• 开发环境：
  trunk serve --features dev
• 预发布环境：
  trunk build --release --features staging
• 生产环境：
  trunk build --release --features prod

方法三：外部配置文件 + 构建脚本替换 #

适合需要可视化修改配置、无需改动代码的场景。

1. 创建多环境配置文件 #

在项目根目录创建：

• config.dev.json：

{
  "api_base_url": "http://dev-api.example.com/api"
}

• config.staging.json：

{
  "api_base_url": "http://staging-api.example.com/api"
}

• config.prod.json：

{
  "api_base_url": "https://prod-api.example.com/api"
}

2. 编写构建脚本 #

创建build-with-config.sh：

#!/bin/bash
if [ "$1" = "dev" ]; then
    cp config.dev.json src/config.json
elif [ "$1" = "staging" ]; then
    cp config.staging.json src/config.json
elif [ "$1" = "prod" ]; then
    cp config.prod.json src/config.json
else
    echo "无效环境参数，请输入 dev/staging/prod"
    exit 1
fi

# 开发环境用热重载，其他环境用release编译
if [ "$1" != "dev" ]; then
    trunk build --release
else
    trunk serve
fi

3. 代码中读取配置文件 #

先在Cargo.toml添加依赖：

[dependencies]
serde = { version = "1.0", features = ["derive"] }
serde_json = "1.0"

然后在src/config.rs中读取：

use serde::Deserialize;
use std::fs;

#[derive(Deserialize)]
pub struct AppConfig {
    pub api_base_url: String,
}

impl AppConfig {
    pub fn new() -> Self {
        let config_content = fs::read_to_string("src/config.json")
            .expect("读取配置文件失败");
        serde_json::from_str(&config_content)
            .expect("解析配置文件失败")
    }
}

4. 运行脚本构建 #

• 开发：./build-with-config.sh dev
• 预发布：./build-with-config.sh staging
• 生产：./build-with-config.sh prod

注意事项 #

• 开发环境用trunk serve支持热重载，预发布/生产环境必须加--release编译优化代码；
• CI/CD场景优先选环境变量方案，无需额外脚本即可在流水线中配置；
• 用Cargo特性时，确保默认特性符合日常开发习惯，避免误编译生产代码。

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