gitlab-ci.yml中定义的variables前端代码怎么使用？

Question

gitlab-ci.yml中定义

variables:
    url: 'xxx'

然后前端代码中要用这个url，怎么使用？

Answer 1

在 gitlab-ci.yml 中定义变量，确保变量名以 VITE_ 作为前缀，这是因为 Vite 只会把以 VITE_ 开头的环境变量暴露给前端代码：

variables:
  VITE_API_URL: 'https://example.com/api'

在 Vite 配置文件（例如 vite.config.js 或 vite.config.ts）中，你可以通过 import.meta.env 访问环境变量：

export default {
  // 其他 Vite 配置...
  define: {
    'process.env': process.env,
  },
}

在 React 项目的前端代码中，你要通过 import.meta.env 访问以 VITE_ 开头的环境变量：

const apiUrl = import.meta.env.VITE_API_URL;