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

一、配置:
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~~
在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

嵌入式人工智能(6-树莓派4B按键输入控制LED)

1、按键 按键的原理都是一样,通过按键开关的按下导通,抬起断开的情况,GPIO引脚来检测其是否有电流流入。GPIO有input()方法,对于GPIO引脚检测电流,不能让其引脚悬空,否则引脚会受周边环境电磁干扰产生微弱…

获取欧洲时报中国板块前新闻数据(多线程版)

这里写目录标题 一.数据获取流程二.获取主页面数据并提取出文章url三.获取文章详情页的数据并提取整体代码展示 一.数据获取流程 我们首先通过抓包就能够找到我们所需数据的api 这里一共有五个参数其中只有第一个和第五个参数是变化的第一个参数就是第几页第五个是一个由时…

HCNA ICMP:因特网控制消息协议

ICMP:因特网控制消息协议 前言 Internet控制报文协议ICMP是网络层的一个重要协议。ICMP协议用来在网络设备间传递各种差错和控制信息,他对于手机各种网络信息、诊断和排除各种网络故障有至关重要的作用。使用基于ICMP的应用时,需要对ICMP的工…

中介者模式(行为型)

目录 一、前言 二、中介者模式 三、总结 一、前言 中介者模式(Mediator Pattern)是一种行为型设计模式,又成为调停者模式,用一个中介对象来封装一系列的对象交互。中介者使各对象不需要显式地互相引用,从而使其耦合…

防火墙双机热备(接上一个NAT实验)

一、实验拓扑 二、实验需求 1、对现有网络进行改造升级,将当个防火墙组网改成双机热备的组网形式,做负载分担模式,游客区和DMZ区走FW3,生产区和办公区的流量走FW1 2、办公区上网用户限制流量不超过100M,其中销售部人员…

【深度学习】基于深度学习的模式识别基础

一 模式识别基础 “模式”指的是数据中具有某些相似特征或属性的事物或事件的集合。具体来说,模式可以是以下几种形式: 视觉模式 在图像或视频中,模式可以是某种形状、颜色组合或纹理。例如,人脸、文字字符、手写数字等都可以视…

【边缘计算网关教程】8.ModbusTCP采集存储Influxdb

前景回顾-【边缘计算网关教程】7.Modbus协议转MQTT协议-CSDN博客 需求概述 💡注:使用Influxdb数据库节点,需要插上micro sd卡才可以 本章节主要实现一个流程:EG8200每10秒采集一次Modbus TCP数据存入Influxdb数据库,并且每分钟…

[日进斗金系列]用码上飞解决企微开发维修管理系统的需求

前言: 今天跟大家唠唠如何用小money生 大money的方法,首先我们需要准备一个工具。 这个工具叫码上飞CodeFlying,它是目前国内首发的L4级自动化智能软件开发平台。 它可以在短时间内,与AI进行几轮对话就能开发出一个可以解决实际…

pytorch学习(六):卷积层的使用

卷积函数的概念 卷积核从输入特征图的左上角开始,按照设定的步长(Stride)滑动。步长决定了卷积核每次滑动的像素数,这里我们假设步长 s1。在每次滑动时,卷积核与输入特征图对应位置的元素相乘,然后将这些乘…

ENSP中VLAN的设置

VLAN的详细介绍 VLAN(Virtual Local Area Network)即虚拟局域网,是一种将一个物理的局域网在逻辑上划分成多个广播域的技术。 以下是关于 VLAN 的一些详细介绍: 一、基本概念 1. 作用: - 隔离广播域&#xff1a…

Linux 安装 Docker Compose

Docker Compose 是一种用于定义、运行和管理多容器Docker应用程序的工具,通过YAML文件配置服务,实现一键启动和停止所有服务。 以下是如何在 Linux 系统上安装 Docker Compose 的步骤 1. 下载 Docker Compose 可执行文件 wget https://github.com/dock…

c++ primer plus 第16章string 类和标准模板库,16.1.3 使用字符串

c primer plus 第16章string 类和标准模板库,16.1.3 使用字符串 c primer plus 第16章string 类和标准模板库,16.1.3 使用字符串 文章目录 c primer plus 第16章string 类和标准模板库,16.1.3 使用字符串16.1.3 使用字符串程序清单16.3 hangman.cpp 16.1.3 使用字符串 现在&a…

暑期大数据人工智能企业项目试岗实训班

在数字化转型的浪潮中,大数据和人工智能等前沿技术已成为推动经济发展和科技进步的关键动力。当前,全球各行各业都在积极推进数字化转型,不仅为经济增长注入新活力,也对人才市场结构产生了深刻影响,尤其是对数字化人才…

2024.7.16作业

使用结构体完成学生(学号、姓名、性别、成绩)管理系统 1> 使用菜单实现 2> 功能1:完成对学生信息的录入,确定人数,完成输入 2> 功能2:完成对学生信息的输出 3> 功能3:输出成绩最…

Linux C | 管道open打开方式

Linux C | 管道open打开方式 1.参考 1. 管道 2.现象 是的,这段代码在调用 open(AUDIOIN_FIFO, O_RDONLY) 时可能会被阻塞。原因是 FIFO(命名管道)在以只读模式打开时,如果没有其他进程以写模式打开该 FIFO,open 调用将…

ASP.NET Core----基础学习07----ViewStart ViewImports文件的使用

文章目录 1._ViewStart.cshtml的使用2.更换Layout文件3._ViewImports.cshtml文件的使用 1._ViewStart.cshtml的使用 step1: 在Views文件夹下面创建_ViewStart.cshtml文件 step2: 删掉视图文件中的Layout设置行 step3: 最终显示效果&#xff…

Redis的单线程讲解与指令学习

目录 一.Redis的命令 二.数据类型 三.Redis的key的过期策略如何实现? 四.Redis为什么是单线程的 五.String有关的命令 Redis的学习专栏:http://t.csdnimg.cn/a8cvV 一.Redis的命令 两个基本命令 在Redis当中,有两个基本命令&#xff1…

企业智能制造赋能的环境条件为什么重要?需要准备什么样的环境?

在全球制造业不断演进的今天,智能制造已经成为推动行业创新和转型的关键力量。它不仅代表了技术的革新,更是企业管理模式和运营思路的全面升级。然而,智能制造的落地实施并非一蹴而就,它需要企业在环境条件上做好充分的准备&#…

Java设计模式的7个设计原则

Java设计模式的7个设计原则是面向对象设计领域中的重要指导方针,它们旨在提高软件系统的可维护性、可扩展性、可复用性和灵活性。以下是这7个设计原则的详细解释: 1. 开闭原则(Open-Closed Principle, OCP) 定义:一个…

tinymce vue拓展多图上传 实现拖拽切换位置,图片排序

实现功能:基于tinymce TinyMCE中文文档中文手册 拖拽图片排序,去掉全部上传按钮,点击保存上传图片并关闭弹窗,优化了一些交互提示 声明:本人不是做vue前端的,可能有些更好的方法实现拖拽或者其他一些开源…