vite前端项目根据不同环境切换不同的请求域名，5分钟搞定

太过爱你忘了你带给我的痛 2024-02-05 20:14 32阅读 0赞

有能力的可以直接看vite官方文档：[环境变量和模式 | Vite 官方中文文档][_ Vite]

简单操作步骤：创建不同环境的配置文件，在配置文件中声明VITE\_开头的变量并赋值，然后在项目中引入这个变量并使用。

## 创建配置文件 ##

一般分为开发模式和生产模式两种，可以创建两种不同的环境配置文件。

.env.development 文件：开发环境

// 开发环境
     
    ENV = 'development'
     
    VITE_BASE_URL='https://xxx'

.env.production 文件：生产环境

// 生产环境
     
    ENV = 'production'
     
    VITE_BASE_URL='https://xxx'

默认情况下，开发服务器 (`dev` 命令) 运行在 `development` (开发) 模式，而 `build` 命令则运行在 `production` (生产) 模式。

这意味着当执行 `vite build` 时，它会自动加载 `.env.production` 中可能存在的环境变量。

引入配置变量

在axios请求里面配置使用环境变量里面的url：

const baseURL = import.meta.env.VITE_BASE_URL
    
    const request = axios.create({
        baseURL: baseURL,
        withCredentials: false,
        timeout: 20000,
    })

## 测试使用 ##

如果配置好了之后，可以测试请求的路径是否发生了变化，或者在html中显示一下这个变量是否发生变化：在html中使用：

![84ac39dc6d5142b2bfdb9b6c958b8c83.png][]

如果你要想在vite配置文件中使用，就看一下官网的配置文档吧：[配置 Vite | Vite 官方中文文档][Vite _ Vite]

[_ Vite]: https://cn.vitejs.dev/guide/env-and-mode.html#env-files
[84ac39dc6d5142b2bfdb9b6c958b8c83.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/30/48d2fdd1b4ac460e9b449c7dc44f6f96.png
[Vite _ Vite]: https://cn.vitejs.dev/config/

发表评论取消回复

表情：

评论列表（有 0 条评论，32人围观）

还没有评论，来说两句吧...

相关阅读

相关 maven根据不同的环境打包不同的配置文件

缘起我们在做项目的时候经常会遇到有多个环境每个环境的配置不一样的问题，比如我们的生产环境的数据库和测试环境的数据库肯定不会一样，我们每次在本机测试的时候可能配置的U...

刺骨的言语ヽ痛彻心扉/ 2024年04月20日 08:59/ 0 赞/ 78 阅读

相关 Maven根据不同环境打包不同配置文件的方法

发项目时会遇到这个问题：开发环境，测试环境，生产环境的配置文件不同，打包时经常要手动更改配置文件，更改的少还可以接受，但是如果需要更多个配置文件，手动的方法就显得非常笨重...

妖狐艹你老母/ 2024年04月18日 08:56/ 0 赞/ 74 阅读

相关 Nginx：不同域名访问同一台机器的不同项目

`Nginx`很简单就可以解决同一台机器同时跑两个或者多个项目，而且都通过域名从80端口走。以`Windows`环境下`nginx`服务为例，配置文件`nginx.conf

港控/mmm°/ 2024年02月18日 09:19/ 0 赞/ 3 阅读

相关 vite前端项目根据不同环境切换不同的请求域名，5分钟搞定

有能力的可以直接看vite官方文档：[环境变量和模式 | Vite 官方中文文档][_ Vite] 简单操作步骤：创建不同环境的配置文件，在配置文件中声明VITE\_开头的变

太过爱你忘了你带给我的痛/ 2024年02月05日 20:14/ 0 赞/ 33 阅读

相关不同环境请求不同配置

// 不同环境的请求配置 const prodConfigs = { // 开发环境 'xia.8688sdk.com': {

傷城~/ 2022年12月26日 04:49/ 0 赞/ 219 阅读

相关 Nginx根据域名分发不同端口

> 转载请标明出处： > 原文首发于： [http://www.zhangruibin.com][http_www.zhangruibin.com] > 本文出自 [R

曾经终败给现在/ 2022年10月01日 05:48/ 0 赞/ 463 阅读

相关 maven根据不同环境打包

比较常用的办法就是为不同的环境建立不同的配置文件目录。在打包的时候用对应的文件目录下的配置文件。第三个是测试环境，第四个是三个环境的共同配置。 |-- resourc

迈不过友情╰/ 2022年07月10日 11:58/ 0 赞/ 277 阅读

相关 maven 不同环境变量切换

不同环境变量切换: 1、pom定义profile，定义XML标签名(即参数名) 2、配置文件定义参数的值为如:${pom.jdbc.user

以你之姓@/ 2022年06月13日 05:20/ 0 赞/ 157 阅读

相关 nginx监听相同端口，根据域名请求不同的server

\同时监听相同端口，可以通过匹配server\_name 来决定最终匹配哪个server \server1 server \{ l

系统管理员/ 2022年03月21日 05:08/ 0 赞/ 700 阅读

相关 nginx 同一端口根据不同域名转发到不同端口

1 首先, 我在本地启动了nginx服务和tomcat服务 nginx 端口80: 页面默认如下: ![03175946_xc0A.png][] to

Dear 丶/ 2022年03月11日 14:52/ 0 赞/ 866 阅读