【vue3】vue3+vite无法访问.env.development定义的变量值

最新推荐文章于 2024-08-25 11:06:06 发布
最新推荐文章于 2024-08-25 11:06:06 发布
阅读量2.5k 收藏 2
点赞数 2
分类专栏： vue 文章标签： vue.js webpack 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36977923/article/details/127101031
版权

解决流程

.env.production文件中的变量名前缀使用vite做前缀

VITE_HTTP = http://www.baidu.net

# 应用访问路径
VITE_APP_CONTEXT_PATH = /

# 管理系统/测试环境
VITE_APP_BASE_API = /stage-api

如果是vue2+webpack需要使用vue做前缀

VUE_HTTP = http://www.baidu.net

# 应用访问路径
VUE_APP_CONTEXT_PATH = /

# 管理系统/测试环境
VUE_APP_BASE_API = /stage-api

vite配置环境变量的官方文档
https://cn.vitejs.dev/guide/env-and-mode.html

✨ 踩坑不易，还希望各位大佬支持一下 \textcolor{gray}{踩坑不易，还希望各位大佬支持一下} 踩坑不易，还希望各位大佬支持一下

📃 个人主页： \textcolor{green}{个人主页：} 个人主页： 沉默小管

📃 个人网站： \textcolor{green}{个人网站：} 个人网站： 沉默小管

📃 个人导航网站： \textcolor{green}{个人导航网站：} 个人导航网站： 沉默小管导航网

🔥 技术交流 Q Q 群： 837051545 \textcolor{green}{技术交流QQ群：837051545} 技术交流QQ群：837051545

👍 点赞，你的认可是我创作的动力！ \textcolor{green}{点赞，你的认可是我创作的动力！} 点赞，你的认可是我创作的动力！

⭐️ 收藏，你的青睐是我努力的方向！ \textcolor{green}{收藏，你的青睐是我努力的方向！} 收藏，你的青睐是我努力的方向！

✏️ 评论，你的意见是我进步的财富！ \textcolor{green}{评论，你的意见是我进步的财富！} 评论，你的意见是我进步的财富！

如果有不懂可以留言，我看到了应该会回复
如有错误，请多多指教

沉默小管
关注
专栏目录
Vue3 - 解决报错警告 Vue received a Component which was made a reactive object. This can lead to unnecessar
王佳斌
07-29 2453
vue3，nuxt3，报错，警告，Vue received a Component which was made a reactive object. This can lead to unnecessary performance overhead, and should be avoided by marking the component with markRaw or using shallowRef instead of ref. Component that was made reactive，
Vue3.0+vite vite.config.ts配置与env
qq_42396791的博客
03-15 1469
【代码】Vue3.0 vite.config.ts配置。
vue3（vite）配置环境变量
weixin_55049839的博客
08-02 1338
一般在开发时候最常用到(development)开发环境、(production)生产环境、(test)测试环境。在vue3根目录创建三个文件，分别为：.env.development 、.env.production 、.env.test
Vite环境变量不生效
drunk2的博客
05-23 3655
VITE创建项目后就有了.env.development文件了，开发环境运行时默认使用该文件，但是在项目中就是读不出值undefined，只能读出默认项。我有空也会再研究研究，这个坑踩了我很久了)搞到这一步的应该都清楚环境变量的配置了，就不多阐述了。默认只识别VITE开头的变量应该也不用多说。
vue3+vite配置环境变量实现开发、测试、生产的区分
最新发布
学而思(xiejava的blog)
08-25 2460
在vue的实际项目中都要经过开发、测试、然后上生产的阶段，在开发、测试的过程中往往会要频繁的切换开发、测试、生产等不同的环境。每个环境的配置有可能不一样，本文介绍如何通过vue3+vite配置环境变量实现开发、测试、生产灵活便捷的切换。
【react+ts】找不到less类型,Cannot find module ‘./xxx.module.less‘ or its corresponding type declarations
我的开源项目:https://gitee.com/derekgo/vue-cms_xg
01-26 5479
问题描述 Cannot find module ‘./index.module.less’ or its corresponding type declarations 找不到less后缀名的类型 解决办法 在src目录下创建类型声明文件react-app-env.d.ts，并且声明less类型 内容如下 declare module '*.module.less' { const classes: { readonly [key: string]: string }; export de
Vue received a Component which was made a reactive object.
Dawnchen1的博客
06-16 3124
报错原因：vue接收到一个组件，该组件是一个响应式对象。这可能会导致不必要的性能开销，应该通过使用’ ‘或使用’ ‘而不是’ '来避免。解决办法：使用或者’ '将组件设置为非响应式
Vue received a Component which was made a reactive object. This can lead to unnecessary performance
叮当的猫猫的博客
08-04 7519
总之，如果你将一个Vue组件对象转换为响应式对象，可能会导致不必要的性能开销，因此建议使用"markRaw"方法将组件对象标记为非响应式对象，或者使用"shallowRef"代替"ref"来创建一个浅响应式对象。为了避免这种情况，Vue建议使用"markRaw"方法将组件对象标记为非响应式对象，或者使用"shallowRef"代替"ref"来创建一个浅响应式对象。在上面的代码中，我们使用"markRaw"方法将"MyComponent"组件对象标记为非响应式对象，避免了将组件对象转换为响应式对象的情况。
[Vue warn]: Vue received a Component which was made a reactive object. This can lead to unnecessary
热门推荐
寿春
08-07 1万+
[Vue warn]: Vue received a Component which was made a reactive object. This can lead to unnecessary performance overhead, and should be avoided by marking the component with `markRaw` or using `shallowRef` instead of `ref`.
vue3+vite+antd 后台管理系统基础模板
02-06
`.env.development` 和 `.env.production` 文件是用来配置不同环境下的变量，如API地址、环境标志等，帮助区分开发和生产环境。 `.gitignore` 文件定义了版本控制系统Git应忽略的文件或目录，防止不必要的文件被...
Vue3+vite搭建基础架构示例代码
02-20
内容概要：Vue3+vite搭建基础架构示例代码。通过该代码示例熟悉vue3写法，以及熟悉router、i18n语言、store全局属性使用、styles全局样式、utils工具类使用、component组件使用、layout通用基础架构设计、以及依赖...
golang 获取客户端IP
02-22
集成各种获取方式，获取正确的IP
基于vite+vue3+pinia+element-plus+ts后台管理系统源码+项目说明.zip
04-10
基于vite+vue3+pinia+element-plus+ts后台管理系统源码+项目说明.zip ## 简介 vue-element-perfect 是一个后台前端解决方案,它使用了最新的前端技术栈、动态路由，权限验证，并且有着丰富的组件,企业级中后台解决...
Vue3.0+typescript+Vite+Pinia+Element-plus搭建vue3框架！
qq_33546296的博客
06-03 1049
/ 此处的id很重要name: ''}),getters: {},},actions: {},// 登录// 调用接口，做逻辑处理})setup() {// $patch 修改 store 中的数据name: '名称被修改了,nameLength也改变了'})return {userStore,updateName},})
vue3报警告：Vue received a Component which was made a reactive object. This can lead to unnecessary perf
zhang_zan
02-28 2083
vue3报警告：Vue received a Component which was made a reactive object. This can lead to unnecessary perf
当vue3提示[Vue warn]: Vue received a Component which was made a reactive object.
qq_18470967的博客
12-16 1万+
当vue3提示[Vue warn]: Vue received a Component which was made a reactive object.
Vue received a Component that was made a reactive object. This can lead to unnecessary performance
valsedefleurs的博客
01-05 5044
但是，在某些情况下，将Vue组件对象转换为响应式对象是不必要的，因为组件本身是Vue的核心概念，已经具有响应式的功能，因此，如果你将一个Vue组件对象转换为响应式对象，将会出现重复观察相同的对象属性的情况，导致不必要的性能开销。将一个Vue组件对象转换为响应式对象时，可能会导致不必要的性能开销。为了避免这种情况，Vue建议使用markRaw方法将组件对象标记为非响应式对象，或者使用shallowRef代替ref来创建一个浅响应式对象。终端提示警告warning message。
Vue received a Component that was made a reactive object. This can lead to unnecessary performance o
weixin_44166849的博客
08-14 440
vue3+vite+ts 报错 Vue received a Component that was made a reactive object. This can lead to unnecessary performance overhead and should be avoided by marking the component with `markRaw` or using `shallowRef` instead of `ref`.
当vue3提示[Vue warn] Vue received a Component which was made a reactive object
m0_67401920的博客
03-10 2215
解决方案 开题直接放解决方案，不墨迹，解决方案很简单，提示你去给组件使用markRaw or shallowRef包起来就好了，我直接使用了markRaw来包起组件 // 直接包起来 import { markRaw } from 'vue' 直接在应用组件那里包起来就好了，就不会报错了 前言 当我在使用到一个组件的时候，他报了这么一个警告 错误的提示地方，通过这个错误的定位是在我使用这些个edit组件里面报的，这些个组件是由elementPlus引入的 警告分析 先分析一下我这个警告的原因 我这
vue3 vite ts .env.development
01-13
在Vue3 + Vite项目中，可以使用`.env.development`文件来配置开发环境的参数。以下是配置`.env.development`文件的步骤： 1. 在项目根目录下创建`.env.development`文件。 2. 在`.env.development`文件中，使用`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

沉默小管

你的鼓励是我最大的动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值