在我正在开发的单页应用程序中,我正在使用 Vite 并在我的vite.config.ts
文件我有以下代理:
proxy: {
'/v1': {
target: 'https://127.0.0.1:8080',
changeOrigin: true,
secure: false
}
}
有没有办法根据是否在生产环境中来改变这个目标?就像是:
proxy: {
'/v1': {
target: isDev ? 'https://127.0.0.1:8080' : 'https://api.example.com',
changeOrigin: isDev,
secure: !isDev
}
}
也就是说,在我的本地环境中,我想针对本地服务器进行开发,这样我的 fetch API 调用就像fetch("/v1/get-posts")
转发至https://127.0.0.1:8080/v1/get-posts
,但是在我的生产版本中(我通过创建vite build
),它们将被转发到:https://api.example.com/v1/get-posts
这可以做到吗?如果可以,如何做到?
开发服务器及其代理配置没有捆绑到构建输出中,因此您的目标实际上没有多大意义。但是,从技术上讲,您可以通过以下方式在生产模式下运行开发服务器mode
旗帜,所以也许这就是你的意思。
在这种情况下,您可以使用条件配置 https://vitejs.dev/config/#conditional-config, where isDev
将会mode === 'development'
:
// vite.config.js
import { defineConfig } from 'vite'
import { fileURLToPath } from 'url'
import vue from '@vitejs/plugin-vue'
const defaultConfig = {
plugins: [vue()],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
}
}
export default defineConfig(({ command, mode }) => {
if (command === 'serve') {
????
const isDev = mode === 'development'
return {
...defaultConfig,
server: {
proxy: {
'/v1': {
target: isDev ? 'https://127.0.0.1:8080' : 'https://api.example.com',
changeOrigin: isDev,
secure: !isDev
}
}
}
}
} else {
return defaultConfig
}
})
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)