如何在Vite项目的GitHub Action YAML中配置并读取环境变量

你遇到的问题主要是两个环节的配置有误，下面是修正后的完整方案：

1. 修正GitHub Action的环境变量写法 #

GitHub Action的env配置不需要用等号，而是采用键值对的YAML语法，并且要确保变量配置在正确的层级（job级别或step级别）。

正确的staging.yaml示例：

# staging.yaml - GitHub Action配置文件
name: Staging Deployment
on:
  push:
    branches: [staging]
jobs:
  deploy:
    runs-on: ubuntu-latest
    # 配置job级别的环境变量，该job下所有step都能访问
    env:
      VITE_INTERNAL: true
    steps:
      - name: 拉取代码
        uses: actions/checkout@v4
      - name: 安装依赖
        run: npm install
      - name: 构建项目
        run: npm run build
        # 若只需要在当前step生效，也可以单独在这里配置env
        # env:
        #   VITE_INTERNAL: true

2. Vite项目中正确访问环境变量 #

Vite对客户端环境变量的处理有标准方式：

• 只有以VITE_开头的变量会被暴露到客户端代码中
• 客户端代码中推荐使用import.meta.env.VITE_XXX来访问，而非直接用process.env（虽然部分场景下process.env能工作，但import.meta.env是Vite官方推荐的标准写法）

修正后的Vue组件代码：

// index.vue - Vite项目组件
function myTest(){
    console.log(import.meta.env.VITE_INTERNAL); // 输出"true"
    // 若要兼容旧写法，也可以保留process.env，但更推荐前者
    // console.log(process.env.VITE_INTERNAL);
}

额外注意事项 #

• 确保执行npm run build的step能获取到配置的环境变量：GitHub Action会将env中的变量注入到step的运行环境中，只要配置层级正确，构建过程就能读取到这些变量。
• 本地模拟测试：可以在项目根目录创建.env.staging文件，写入VITE_INTERNAL=true，然后通过vite --mode staging启动项目，就能在本地模拟staging环境的变量配置。

内容的提问来源于stack exchange，提问作者Oang Phạm