vue3 process.env.XXX环境变量不生效的解决方法

 更新时间:2023年08月18日 09:49:06   作者:_Jyann_  
这篇文章主要给大家介绍了关于vue3 process.env.XXX环境变量不生效的解决方法,通过文中介绍的方法可以很方便的解决遇到的问题,对大家学习或者使用vue3具有一定的参考借鉴价值,需要的朋友可以参考下

问题:

使用process.env.XXX时获取不到环境变量的值:

axios.defaults.baseURL = process.env.VUE_APP_BASE_API;

解决:

一:项目根目录下的.env.development和.env.production环境配置文件中,NODE_ENV=development的值必须和package.json文件启动配置--mode一致

//.env.development
NODE_ENV=development
VUE_APP_BASE_API=/api
VUE_APP_BASE_URL=http://localhost:8081/
VUE_APP_PROXYURL=http://localhost:8080/

"scripts": {
        "serve": "vue-cli-service serve",
        "dev": "vue-cli-service serve --mode development",
        "prod": "vue-cli-service serve --mode production",
    },

二:.env.development和.env.production环境配置文件中变量名必须以VUE_APP_开头

总结

到此这篇关于vue3 process.env.XXX环境变量不生效的解决方法的文章就介绍到这了,更多相关vue3 process.env.XXX环境变量不生效内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Vue解读之响应式原理源码剖析

    Vue解读之响应式原理源码剖析

    Vue 最独特的特性之一,是其非侵入性的响应式系统,下面这篇文章主要给大家介绍了关于Vue响应式原理源码剖析的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
    2021-10-10
  • 一文详解Vue-组件自定义事件(绑定和解绑)

    一文详解Vue-组件自定义事件(绑定和解绑)

    这篇文章主要介绍了Vue-组件自定义事件的绑定和解绑,文中有详细的图文实例,对学习或工作有一定的参考价值,需要的小伙伴可以阅读下
    2023-05-05
  • vue实现会议室拖拽布局排座功能

    vue实现会议室拖拽布局排座功能

    vue-draggable-resizable-gorkys是一更强大的拖拽组件,可以随意拖拽,有点坐标,会议室拖拽布局排座是vue-draggable结合vue-draggable-resizable-gorkys进行开发的,本文重点给大家介绍vue实现会议室拖拽布局排座,感兴趣的朋友一起看看吧
    2023-11-11
  • 探索Vue如何高效构建可复用组件

    探索Vue如何高效构建可复用组件

    Vue.js作为现代前端开发中的佼佼者,其组件系统是构建高效、灵活和可扩展用户界面的关键,本文带大家深度探索 Vue.js 组件的核心奥义,感兴趣的小伙伴可以了解下
    2024-12-12
  • Vue实现简易记事本功能

    Vue实现简易记事本功能

    这篇文章主要为大家详细介绍了Vue实现简易记事本功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-11-11
  • vuex刷新页面后如何解决丢失store的数据问题

    vuex刷新页面后如何解决丢失store的数据问题

    这篇文章主要介绍了vuex刷新页面后如何解决丢失store的数据问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-12-12
  • Vue3中toRef与toRefs的区别

    Vue3中toRef与toRefs的区别

    这篇文章主要介绍了Vue3中toRef与toRefs的区别,toRefs与toRef功能一致,但可以批量创建多个ref对象,需要注意的是它只会解析对象的第一层属性,语法直接传入对象 toRefs,下面更多内容的介绍需要的小伙伴可以参考一下
    2022-03-03
  • 10分钟带你上手Vue3中新增的API

    10分钟带你上手Vue3中新增的API

    这篇文章主要介绍了10分钟教你快速上手Vue3中新增的API,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-09-09
  • vue 3 中watch 和watchEffect 的新用法

    vue 3 中watch 和watchEffect 的新用法

    本篇文章主要通过 Options API 和 Composition API 对比 watch 的使用方法,让大家快速掌握 vue3 中 watch 新用法,需要的朋友可以参考一下哦,希望对大家有所帮助
    2021-11-11
  • 在Vue项目中集成和使用Lottie动画库的步骤详解

    在Vue项目中集成和使用Lottie动画库的步骤详解

    Lottie 是一个由 Airbnb 开源的动画库,它允许你在 Web、iOS、Android 等平台上使用体积小、高性能的体验丰富的矢量动画,本文将详细介绍在 Vue 项目中如何集成和使用 Lottie,文中有详细的代码讲解,需要的朋友可以参考下
    2023-11-11

最新评论