vue-cli - vite 开发服务器在所有其他中间件之前执行中间件

Question

使用 vue-cli 可以像这样配置 webpack devServer.before函数：

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

如何配置Vite 开发服务器以获得相同的行为？

（我尝试了该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_才能起作用。