在开发与生产版本中自动更改 Vite 代理位置?

2024-03-04

在我正在开发的单页应用程序中,我正在使用 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(使用前将#替换为@)

在开发与生产版本中自动更改 Vite 代理位置? 的相关文章

  • Kotlin JavaScript 到 TypeScript 定义文件

    我已经找到了ts2kt 库 https github com Kotlin ts2kt这将从任意位置创建 Kotlin 头文件 d ts文件 但是 我想朝相反的方向走 我想构建一个可以编译为 JavaScript 的 Kotlin 库 但我
  • 如何使用 Typescript 设置 Material-UI for React?

    我在将 Material UI 添加到我的 React 项目中时遇到了一些问题 该项目是用 Typescript 编程的 根据教程 我首先添加react tab event plugin import injectTapEventPlugi
  • 如何在 Angular2 中隐藏和替换组件

    你好 我有一个父组件 A 它有 2 个子组件 B 和 C 父级A默认显示子组件B 现在 当单击父级A上显示的按钮时 它将用子组件C替换子组件B 在Angular2中单击按钮后 如何用组件C替换组件B 为此 您可以使用 ngIf https
  • Typescript :过滤 keyof 类型参数

    我正在使用 typescript 3 8 3 并尝试动态查找某种类型的键并使用它们来生成其他对象 我有一个Detail对象并想用它来动态生成一个Column对象仅基于类型的属性Desc 这是我想做的事情的简化代码 Model interfa
  • 在打字稿中通过 this 从派生类型调用构造函数

    在我的打字稿中 我尝试通过基类中的方法创建 克隆子对象 这是我的 简化的 设置 abstract class BaseClass
  • 在严格模式下,一个对象字面量不能有多个同名属性

    这是我的代码 import combineReducers from redux import postReducers from postReducers import stationsReducer from TrackCircuitS
  • Durandal SPA 与打字稿有关的问题

    我使用 TypeScript 1 8 将我的 durandal SPA 应用程序从 VS 2012 更新到 VS 2015 它将生成 JavaScript ECMA5 我解决了所有构建错误 但我无法修复一个名为 return 语句只能在函数
  • 如何将 vue3-openlayers 插件添加到 nuxt

    我有以下 main ts 文件Vue3 https v3 vuejs org import createApp from vue import App from App vue How to do this in nuxt3 import
  • 如何使用 TS 配置 CRA 以支持 nullish-coalescing-operator

    所以我开始了一个新的 CRA 项目 我正在使用 TS beta 来获得一些不错的功能 例如链接运算符 但我也想使用nullish coalescing operator ifExists elseUseThis 不幸的是它不能开箱即用 并告
  • 无法在 Angular 10 中的“pdf-viewer”=>“ng2-pdf-viewer”中显示 blob url

    我有一个 API 它将上传的文件作为 blob 返回 当我尝试绑定时src如果使用 blob URL 则它不会显示任何内容 但是 当我尝试绑定直接 URL 时 它可以显示 PDF 文件 这是我下面给出的代码 我的 TS 代码 downloa
  • 打字稿交集类型和函数签名不会引发预期错误

    我声明了以下类型 type ExampleA a string type ExampleB b number type ExampleC c boolean type Examples ExampleA ExampleB ExampleC
  • 如何在 RxJS 订阅方法中等待

    在 RxJS 主题的订阅回调内部 我想要await on an async功能 下面是打字稿转译器抱怨的代码示例 错误 131 21 TS2304 找不到名称 await async ngOnInit this subscriber dat
  • 从 TypeScript 运行任何 Linux 终端命令?

    有没有办法直接从 TypeScript 类中执行 Linux 终端命令 这个想法是做类似的事情 let myTerminal new LinuxTerminal let terminalResult myTerminal run sudo
  • Typescript 模块解析的根路径

    我有两个使用打字稿的项目 一个是核心项目 moduleA 另一个是业务项目 moduleB 项目B使用项目A的模块 ts文件 位于 scripts文件夹 我想通过以下方式为projectB指定模块解析根文件夹projectA scripts
  • 第二个函数参数的条件类型

    我有以下功能 function doSomething param1 string param2 string return param1 param2 我也有基于 json 的类型 其结构看起来与此类似 a1 b1 something1
  • 如何解决此错误“不要使用对象作为类型”?

    我不明白这个错误消息造成的 我的组件有两个和一个包含对象的数据数组 我收到一条错误消息 不要使用object作为一种类型 这object类型目前很难使用 我该如何解决它 我附加了数组包含对象的数据 first tsx import data
  • tsc-watch 是否消耗 TSC_NONPOLLING_WATCHER?

    我正在从事微服务集成项目 我使用同时运行 8 个打字稿服务tsc watch preserveWatchOutput onSuccess node build index js 即使我根本不编写源代码 这些进程也会消耗 70 的 CPU 我
  • TypeScript 支持互斥类型吗?

    我有一个带有参数的方法 我希望 TypeScript 验证传入的对象 在编译时 我知道运行时是一种不同的动物 仅满足允许的接口之一 Example interface Person ethnicity string interface Pe
  • 如何设置vite.config.js基本公共路径?

    我正在尝试设置一个base url对于我的开发和生产环境 但是vitejs配置未解决 根据vitejs https vitejs dev config 您可以在配置选项中设置在开发或生产中提供服务时的基本公共路径 当从命令行运行 vite
  • 如何在 Angular 项目中使用 Bootstrap?

    我开始我的第一次Angular应用程序和我的基本设置已完成 我怎样才能添加引导程序我的申请 如果您可以提供一个示例 那么这将是一个很大的帮助 如果您使用Angular CLI要生成新项目 还有另一种方法可以使 bootstrap 可访问角度

随机推荐

  • 如何在 Rust 中连接静态字符串

    我正在尝试连接静态字符串和字符串文字来构建另一个静态字符串 以下是我能想到的最好的方法 但它不起作用 const DESCRIPTION static str my program const VERSION static str env
  • 将两个 div 粘贴到另一个 div 上

    这就是我想要实现的目标 我有3个div 我们称它们为左中和右 中心 div 的宽度是动态的 它可以是 100px 200px 等 具体取决于中心 div 所保存的图像 如何做到无论中心 div 大小如何 左侧和右侧 div 都粘在中心 di
  • 使用 Javascript/JQuery/Rails 3 动态添加新行

    我正在构建一个时间表表单 其中包含一个日历 使用户能够选择指定的日期并搜索项目 我有这个功能 我基本上拥有的是这样的 一旦用户搜索他们的项目并按加号按钮 即指定的项目 在本例中是 Asda 用户然后单击加号图标 这将创建一个新行并将其放入
  • Android 上的多选 ListPreference

    关于在 Android 上实现多选 复选框 ListPreference 有什么想法吗 我必须扩展 ListPreference 吗 是否已经记录了任何类来执行此操作 Thanks 多选 ListPreference 现在从 API 级别
  • 在 Rails 中实现“无尽页面”的最佳方法?

    分页太烂了 用户应该能够永远向下滚动 在适当的时候自动拉入新内容 有一个体面的导轨铸造 http railscasts com episodes 114 endless page关于这一点 但 Ryan 承认他的解决方案在 IE 中不起作用
  • 无法访问 xamarin 表单项目中的已处置对象异常

    我正在开发 Xamarin Forms 表单版本 2 3 4 231 项目 该应用程序在 iOS 中运行良好 而在 Android 中则随机崩溃 从崩溃日志来看 这似乎是内部崩溃 但我不知道从哪里开始 我知道应用程序中没有足够的信息 但有人
  • 我可以获取视图中当前控制器的名称吗?

    有没有办法从视图中找出当前控制器是什么 举个例子说明为什么我想知道这一点 如果多个控制器共享相同的布局 我可能在布局 ERB 文件中包含一部分 我想在其中突出显示基于控制器的当前页面的菜单项 也许这是一个糟糕的方法 如果是这样 更优选的方法
  • Cloud Firestore Swift:如何删除文档查询

    我想删除我的用户名集合中包含 UID 字段作为当前用户 ID 的所有文档 到目前为止 这是我的代码 let uid Auth auth currentUser uid db collection Usernames whereField U
  • 如何在 Sphinx 文档中将成员注释为抽象?

    以下两个属性定义在 Sphinx 中显示完全相同autodocHTML 输出 property def concrete self This is the concrete docstring pass abstractproperty d
  • cURL NTLM 代理授权

    我已经使用curl有一段时间了 它工作正常 但是使用用户 域 用户名 来验证curl的代理无法请求授权 授权方式为NTLM 该代码位于批处理文件中 Code curl proxy ntlm proxy user proxy PROXY UR
  • 在定义函数之前调用函数(前向引用扩展了变量的定义)

    考虑这个基本的 Scala 示例代码 object Test def main args Array String inner var x Int 5 def inner println x x 尝试编译它会产生以下错误消息 test sc
  • Access 中的 ConcatRelated(),使用两个键

    我找到了 ConcatRelated 函数 http allenbrowne com func concat html 它似乎做了我想要的事情 但我需要输入两个键而不是一个 我的数据如下所示 Chain Store Warehouse Wa
  • 从相机捕获的iphone图像自动旋转Swift

    通过编程方式 我在应用程序中从相机捕获了图像 它已经很好地获取了 但是当我转移到另一个时 查看并忽略那个视图 当时我的图像我想旋转为风景 我用相机拍摄了图像 当我从照片库获取图像时 没有发现问题 下图是我的原图 截屏 https i sta
  • 如何将数据从一个 BigTable 表复制到另一个 BigTable 表

    我正在尝试将数据从一个 Bigtable 表复制到另一个 Bigtable 表 但没有找到任何直接的方法来执行此操作 可以选择将数据从 Bigtable 表复制到 Google Storage 然后从存储文件复制回 Bigtable 但这需
  • API方法排序:Swagger版本3.0.2

    我在用招摇版本3 0 2 http swagger io swagger ui 我也关注了这个答案 https stackoverflow com a 32345035 3006390但对方法顺序没有影响 window onload fun
  • 在 Spark 数据框中创建 StructType 的空列

    我需要将 StructType 的空列添加到现有的 DataFrame 中 尝试以下 df df withColumn features typedLit StructType Nil And df df withColumn featur
  • 对表单集中的每个表单进行重复查询

    在我的 Django 应用程序中 我的用户可以拥有多个职位 即 Position 模型有 User 模型的外键 通过使用 djangomodelformset factory我输出与当前登录用户关联的所有位置 如下所示 视图 py clas
  • 单步执行属性/函数 (F11) 无法按预期工作

    In Visual Studio 2010 the Step Into Property Function F11 doesn t work as expected 它不会进入属性设置器或获取器 我将解决方案转换为Visual Studio
  • 如何在 React App 中嵌入 Google 自定义搜索?

    我需要在 React 应用程序中嵌入 JS 小部件 有办法做到吗 JS 小部件是 Google 自定义搜索 function var cx 111 xxx var gcse document createElement script gcs
  • 在开发与生产版本中自动更改 Vite 代理位置?

    在我正在开发的单页应用程序中 我正在使用 Vite 并在我的vite config ts文件我有以下代理 proxy v1 target https 127 0 0 1 8080 changeOrigin true secure false