vite配置环境变量和使用,配置正确后import.meta.env.VITE_APP_BASE_URL编译报错的解决方法

news2024/9/23 3:29:47

一、配置:
1.新增四个环境文件
.env.development .env.test .env.production .env.pre
内容为不同环境的不同参数变量必须以VITE_APP开头,如:

#接口地址
VITE_APP_BASE_URL="¥¥¥¥¥¥¥"
#channel
VITE_APP_REQUEST_CHANNEL="¥¥¥¥¥¥¥"

2.修改vite.config.ts,const env … 增加define:{…}

import { defineConfig, splitVendorChunkPlugin, loadEnv } from 'vite';
export default defineConfig(({ command, mode }) => {
  const env = loadEnv(mode, process.cwd(), '')
  console.log("env", env)
  return {
	define: {
      'process.env': {
        VITE_APP_BASE_URL: env.VITE_APP_BASE_URL,
        VITE_APP_REQUEST_CHANNEL: env.VITE_APP_REQUEST_CHANNEL
      }
    }
  }

二、使用
1.在request.js中就可以直接用了

baseURL: import.meta.env.VITE_APP_BASE_URL,

2.在package.json中根据不同环境使用不同的打包命令,构建出使用不同变量的产物,请求接口的时候不同环境的接口服务器可以不同

"scripts": {
    "dev": "vite",
    "build": "node --max_old_space_size=4096 ./node_modules/vite/bin/vite.js build",
    "build:test": "node --max_old_space_size=4096 ./node_modules/vite/bin/vite.js build --mode test",
    "build:production": "node --max_old_space_size=4096 ./node_modules/vite/bin/vite.js build --mode production",
    "preview": "vite preview",
    "start": "npm run dev",
    "serve:test": "vite --mode test",
    "serve:production": "vite --mode production",
    "pre": "node --max_old_space_size=4096 ./node_modules/vite/bin/vite.js build --mode pre"

构建时候不同环境使用不同命令,使用个不同环境变量 package.json
比如生产:npm run build:production

三、配置之后的报错
下载"vite":“5.0.0”
将vite从4.5.1更新到5.0.0,就不会出现关于import的报错了,
“@vitejs/plugin-legacy”: “5.0.0”,
“@vitejs/plugin-vue”: “5.0.0”,
“@vitejs/plugin-vue-jsx”: “4.0.0”,
我的项目里这几个依赖也要配合更新到这些较高的版本
这就是环境变量配置正确后import.meta.env.VITE_APP_BASE_URL编译报错的解决方法
bye~~
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1930064.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

算法 —— 快速幂

目录 P1045 [NOIP2003 普及组] 麦森数 P1226 【模板】快速幂 原理I 原理II P1226 代码解析 P1045 代码解析 P1045 [NOIP2003 普及组] 麦森数 本题来自洛谷:P1045 [NOIP2003 普及组] 麦森数,根据题意,我们可以看到本题需要计算最少2的1…

【Linux】权限的管理和Linux上的一些工具

文章目录 权限管理chgrpchownumaskfile指令sudo指令 目录权限粘滞位Linux中的工具1.软件包管理器yum2.rzsz Linux开发工具vim 总结 权限管理 chgrp 功能:修改文件或目录的所属组 格式:chgrp [参数] 用户组名 文件名 常用选项:-R 递归修改文…

Host碰撞实验

目录 Host碰撞原理 Host碰撞判断技巧 Host碰撞检测方法 Host碰撞实验步骤 从攻击者的视角来进行资产的梳理,采用全端口扫描子域名收集的方式,识别所有的企业资产暴露面。但即使是这样,往往会因为配置错误或是未及时回收等原因&#xff0c…

android13 frameworks里面常用的保存信息或者版本判断的方法

总纲 android13 rom 开发总纲说明 目录 1.前言 2. 数据库 2.1 代码读取用法参考 3.prop 属性配置 3.1 property的key值有哪些特点 4.区别 5. 其他数据存储 6.彩蛋 1.前言 frameworks 不像我们一般开发app那样,很多应用保存的方法都无法使用。这里记录我们系统rom开…

初学SpringMVC之 JSON 篇

JSON(JavaScript Object Notation,JS 对象标记)是一种轻量级的数据交换格式 采用完全独立于编程语言的文本格式来存储和表示数据 JSON 键值对是用来保存 JavaScript 对象的一种方式 比如:{"name": "张三"}…

ssh -D 选项用于动态(Dynamic)端口转发

举例实现不同ssh连接功能目录 一、功能简介 -D 支持 SOCKS5 协议,可以同时转发 TCP 和 UDP 报文 二、原理介绍 假设拥有三台主机,具体环境如下: 1. 主机 A:本地主机,即 SSH 客户 所在的主机,IP&#xff1…

Python游戏开发——天天酷跑(完整版教程)只需要200行代码就做出了一个天天酷跑小游戏,原来代码做游戏这么简单!零基础也能教你学会!

最近一段时间,小编发现已经好久没有给大家带来趣味游戏的案例展示了。刚好小编趁着周末写了一个《天天酷跑》的游戏,因此拿来跟大家一起分享,和大家一起来重温经典的酷跑游戏。 01 准备开发环境 俗话说,“工欲善其事&#xff0c…

详解:动画专业就业前景和就业方向

随着数字创意产业的蓬勃发展,动画专业已成为越来越多学子的选择。动画专业的就业前景日益广阔,不仅在游戏、影视、广告等传统领域有着广泛应用,还在建筑、教育、医学等多个行业展现出强大的潜力。 那么,何为动画专业呢&#xff1f…

快慢指针的应用(题目来源力扣oj训练)

快慢指针 快慢指针一般用来找到链表的中间节点,就是直接搞两个指针,快指针的移动是慢指针的两倍,那么为什么快慢指针可以找到中间节点,因为假设一个为n的链表,快指针走完慢指针也就是n/2。 具体案例 找链表的中间节…

【深度学习入门篇 ⑦】PyTorch池化层

【🍊易编橙:一个帮助编程小伙伴少走弯路的终身成长社群🍊】 大家好,我是小森( ﹡ˆoˆ﹡ ) ! 易编橙终身成长社群创始团队嘉宾,橙似锦计划领衔成员、阿里云专家博主、腾讯云内容共创官…

Windows 系统利用 SSH 和 WSL2 子系统当服务器

由于最近组内需要将一台 Windows 系统的电脑 W A W_A WA​ 转成能通过 SSH 访问,并且能用 Linux 命令当服务器运行。忙活了一天,终于是把全部东西弄通了。 安装 SSH 首先就是 W A W_A WA​ 先要安装 OpenSSH 服务,直接按照下面的教程安装…

LVS+Keepalive高可用

1、keepalive 调度器的高可用 vip地址主备之间的切换,主在工作时,vip地址只在主上,vip漂移到备服务器。 在主备的优先级不变的情况下,主恢复工作,vip会飘回到住服务器 1、配优先级 2、配置vip和真实服务器 3、主…

【Python实战因果推断】38_双重差分9

目录 Doubly Robust Diff-in-Diff Propensity Score Model Delta Outcome Model All Together Now Doubly Robust Diff-in-Diff 另一种纳入干预前协变变量和时间不变协变变量以考虑条件平行趋势的方法是制作双稳健差分法(DRDID)。要做到这一点&#…

鸿蒙语言基础类库:【@system.brightness (屏幕亮度)】

屏幕亮度 说明: 从API Version 7 开始,该接口不再维护,推荐使用新接口[ohos.brightness]。本模块首批接口从API version 3开始支持。后续版本的新增接口,采用上角标单独标记接口的起始版本。 导入模块 import brightness from sy…

【接口自动化_13课_接口自动化总结】

一、自我介绍 二、项目介绍 自己的职责、项目流程 1)功能测试,怎么设计用例的--测试策略 2)功能测试为什么还有代码实现,能用工具实现,为什么还用代码实现。 基本情况 项目名称:项目类型:项目测试人员…

ubantu22.04安装OceanBase 数据库

1、管理员启动cmd,运行 sudo bash -c "$(curl -s https://obbusiness-private.oss-cn-shanghai.aliyuncs.com/download-center/opensource/service/installer.sh)" 2、提示如下代表安装完成 3、修改数据库配置文件的密码 sudo vim /etc/oceanbase.cnf 然后保存退…

如何申请自费访问学者?自费访问学者材料要哪些?

四、申请自费访问学者需要准备哪些材料 访问学者的申请材料应包括个人简历、推荐信、成绩单、研究计划或课题、语言能力证明等,资费访问学者需提交财务证明。 申请表格填写基本个人信息、访学时间、访学目的等。且应在个人简历详细列出教育背景、工作经历、学术成…

一张图生成绘画全过程,这下人人都成“原画师”了

玩过SD的应该都知道ControlNet吧,最近ControlNet的作者Lvmin Zhang 又搞了一个开源项目PaintsUndo,在Github刚上线就收获了2.7k Star。 只需要上传一张静态图像,PaintsUndo就可以根据提供的图像自动生成对应的绘画全过程视频。 展示从一张白…

【python报错已解决】Stack Overflow

🎬 鸽芷咕:个人主页 🔥 个人专栏: 《C干货基地》《粉丝福利》 ⛺️生活的理想,就是为了理想的生活! 引言 在开发的旅程中,我们难免会遇到各种各样的报错信息,这些报错就像旅途中的绊脚石,阻挡…

GA-Kmeans-Transformer-GRU时序聚类+状态识别组合模型,创新发文无忧!

GA-Kmeans-Transformer-GRU时序聚类状态识别组合模型,创新发文无忧! 目录 GA-Kmeans-Transformer-GRU时序聚类状态识别组合模型,创新发文无忧!效果一览基本介绍程序设计参考资料 效果一览 基本介绍 1.GA-Kmeans-Transformer-GRU时…