Сервер vite dev выполняет промежуточное ПО перед всем другим промежуточным ПО

Question

С помощью vue-cli можно было настроить функцию webpack devServer.before следующим образом :

      devServer: {
    before(app) {
      app.get('/apiUrl', (req, res) => res.send(process.env.API_URL))
    }
  },

Как можно настроить сервер Vite dev для получения такого же поведения?

(Я пробовал с proxy вариант но он не работает.)

Answer 1

Согласно этой проблеме github, переменные среды недоступны в файле vite.config.js (ни в vite.config.ts). Однако в обсуждении этого выпуска также упоминается обходной путь, который можно использовать в этом файле:

      import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig(({mode}) => {
  const env = loadEnv(mode, process.cwd());
  return {
  plugins: [
    vue(),
  ],
  server: {
    proxy: {
      '^/apiUrl': {
        target: env.VITE_API_TARGET,
        changeOrigin: true,
      }
    }
  },
}
})

Обратите внимание, что имя переменной должно начинаться с VITE_ чтобы это работало.