vite-dev-server先于所有其他中间件执行中间件

Question

使用vue-cli可以配置webpack devServer

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_开头，这样才能工作。