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

【问题标题】：vite dev server execute middleware before all other middlewarevite 开发服务器在所有其他中间件之前执行中间件
【发布时间】：2021-06-28 20:31:58
【问题描述】：

使用 vue-cli 可以配置 webpack devServer.before 功能，如 this:

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

如何配置Vite dev server 以获得相同的行为？

（我尝试使用proxy 选项，但它不起作用。）

【问题讨论】：

标签： vue-cli vite

【解决方案1】：

根据this github issue，环境变量在文件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_ 开头才能正常工作。

【讨论】：