env prod 的值不适用于 vite 项目

Question

我需要在 vite.config.js 中使用 .env 的值。语言环境 我在 console.log 中获取值并查看，但在生产中我没有获取值，也看不到 console.log。

根目录下的 vite.config.js

import { defineConfig, loadEnv } from "vite";
import react from "@vitejs/plugin-react";
import svgr from "vite-plugin-svgr";
import { VitePWA } from "vite-plugin-pwa";

export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, process.cwd());

  console.log('## baseURL vite.config', env.VITE_APP_API_URL);
  return {
    server: {
      port: 3001,
      proxy: {
        "/api/socket": process.env.VITE_APP_API_URL_WS  || "http://localhost:8082",
        "/api": process.env.VITE_APP_API_URL || "http://localhost:8082", 

我的.yml

name: CI

on:
  push:
    branches: [ main ]

env:
  BUCKET: my.bucket.com.br
  VITE_APP_API_URL: ${{ secrets.VITE_APP_API_URL }}
  VITE_APP_API_URL_WS: ${{ secrets.VITE_APP_API_URL_WS }}

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
    - uses: actions/checkout@v2

    - name: Setup Node.js
      uses: actions/setup-node@v1
      with:
        node-version: 16.x

    - name: Install dependencies
      run: npm install --force

    - name: Build
      run: npm run build
      env:
        VITE_APP_API_URL: ${{ secrets.VITE_APP_API_URL }}
        VITE_APP_API_URL_WS: ${{ secrets.VITE_APP_API_URL_WS }}

在我的 src/ 组件中，我得到了值，但在 vite.config 中我没有得到。我也尝试过其他方法。
请帮助我。

Answer 1

因为有loadEnv，你可以这样做。

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import svgr from "vite-plugin-svgr";
import { VitePWA } from "vite-plugin-pwa";

export default defineConfig({
  server: {
    port: 3001,
    proxy: {
      "/api/socket": process.env.VITE_APP_API_URL_WS || "http://localhost:8082",
      "/api": process.env.VITE_APP_API_URL || "http://localhost:8082",
    },
  },
  plugins: [react(), svgr(), VitePWA()],
});