GitHub Pages部署时如何在.vue文件中访问GitHub Secrets存储的API密钥

首先明确核心逻辑：GitHub Secrets 仅存在于 GitHub Actions 运行的服务端环境中，无法被客户端运行的 .vue 文件直接读取，需要在项目构建阶段将密钥注入到前端打包产物中才能使用。 #

步骤1：确认前端框架的环境变量前缀要求 #

不同Vue项目脚手架要求环境变量必须带指定前缀才会被注入到前端代码中：

• Vite 搭建的项目：环境变量必须以 VITE_ 开头
• Vue CLI 搭建的项目：环境变量必须以 VUE_APP_ 开头

步骤2：修改GitHub Actions配置 #

你需要把现有配置中的测试echo步骤替换为实际的项目构建步骤，同时将secrets赋值给符合前缀要求的环境变量，示例配置如下：

jobs:
  runs-on: ubuntu-latest
  steps:
    - uses: actions/checkout@v2
    # 安装依赖并执行构建，将密钥注入构建环境
    - name: 构建项目
      run: npm install && npm run build
      env:
        # 以下为Vite项目示例，Vue CLI项目改成VUE_APP_前缀即可
        VITE_SERVICE_API: ${{ secrets.SERVICE_API }}
        VITE_API_KEY: ${{ secrets.API_KEY }}
    # 后续接你原有的GitHub Pages部署步骤

步骤3：在.vue文件中访问环境变量 #

根据你使用的脚手架，直接调用对应全局变量即可：

Vite项目示例： #

<script setup>
// 直接通过import.meta.env读取注入的环境变量
const serviceApi = import.meta.env.VITE_SERVICE_API
const apiKey = import.meta.env.VITE_API_KEY

// 业务逻辑中直接使用变量即可
const fetchData = async () => {
  const res = await fetch(`${serviceApi}/xxx`, {
    headers: {
      'Authorization': apiKey
    }
  })
}
</script>

Vue CLI项目示例： #

<script>
export default {
  mounted() {
    // 通过process.env读取
    const serviceApi = process.env.VUE_APP_SERVICE_API
    const apiKey = process.env.VUE_APP_API_KEY
    console.log(serviceApi, apiKey)
  }
}
</script>

注意事项 #

注入到前端代码中的密钥对所有访问站点的用户都是可见的，可直接通过浏览器控制台查看到源码中的明文值，该方式仅适用于非敏感的公开密钥。如果你的密钥属于高敏感信息，禁止直接注入前端，必须通过后端服务代理所有接口请求，密钥保存在后端服务中。

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