vite2.0项目的环境变量探索(三)

最新推荐文章于 2024-08-05 20:06:18 发布
最新推荐文章于 2024-08-05 20:06:18 发布
阅读量906 收藏
点赞数
分类专栏： vue2/vue3 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_27702739/article/details/118893419
版权
本文探讨了在Vite2.0项目中如何处理不同环境的配置，特别是针对API接口的变化。通过修改package.json，创建.env、.env.development和.env.production文件来区分开发和生产环境的变量。在开发环境中，API接口值被设置并展示在npm run build的后台结果中。
摘要由CSDN通过智能技术生成

我们的项目会有好几个环境，比如dev.test.development等模式，往往我们也需要在不同的环境下会有些值对应会变化，最常见的就是后台的接口api,开发环境的api和生产环境的api是不一致的，所以我们需要进行配置,在vite中我们需要进行这样的配置:
在这里插入图片描述
package.json文件的修改
在这里插入图片描述

.env

DB_PASSWORD=foobar   //项目其他地方是获取不到的
VITE_SOME_KEY=hahaha  //注意必须仪VITE_开始才会在组件其他地方引入

在这里插入图片描述

.env.development


                

                
                
        

        

    

  


        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        

    

      

        

            

              
                
                  风清云淡_A
                
              
            

            

                关注
              
            

        

        

          
      

      

            

                专栏目录
          









                



	

		

			

				
					
vue3+vite项⽬搭建-配置环境变量env

				
			

			

				

					qq_35859392的博客
				

				

					10-09
					
					2107
					
				

			

		

		

			
				
1、env 文件说明

.env --- 全局默认配置文件，在所有的环境中被载入，当你指定了环境，它也会合并,并且优先级大于.env，没有指定环境时先找它
.env.development --- 指定开发环境的配置文件
.env.production --- 指定生产环境的配置文件，当 build 运行会触发此文件

2、根目录下新建文件

其中写环境变量和其它变量，必须要以VITE_开头 (...

			
		

	



                

              
                



	

		

			

				
					
Vite环境变量不生效

				
			

			

				

					drunk2的博客
				

				

					05-23
					
					3600
					
				

			

		

		

			
				
VITE创建项目后就有了.env.development文件了，开发环境运行时默认使用该文件，但是在项目中就是读不出值undefined，只能读出默认项。我有空也会再研究研究，这个坑踩了我很久了)搞到这一步的应该都清楚环境变量的配置了，就不多阐述了。默认只识别VITE开头的变量应该也不用多说。

			
		

	



                


  
              

                


	

		

			

				
					
vite-vue3中配置.env文件的使用

				
			

			

				

					wang1811539550的博客
				

				

					08-05
					
					242
					
				

			

		

		

			
				
vite使用.env文件

			
		

	





	

		

			

				
					
vite.config.js中调用.env.development或.env.production中的配置

				
			

			

				

					dnpao的专栏
				

				

					12-13
					
					853
					
				

			

		

		

			
				
【代码】vite.config.js中调用.env.development或.env.production中的配置。

			
		

	



		

			
		



	

		

			

				
					
VUE3 vite获取.env.development配置环境

					
热门推荐

				
			

			

				

					huanglgln的专栏
				

				

					11-30
					
					1万+
					
				

			

		

		

			
				
vue3无法获取.env.development问题

			
		

	





	

		

			

				
					
Vite中如何.env.development、.env.production 环境变量配置

				
			

			

				

					nyasm的博客
				

				

					02-15
					
					2172
					
				

			

		

		

			
				
env.development文件。.env.production文件。

			
		

	





	

		

			

				
					
Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0后台管理系统

				
			

			

				

					05-02
				

			

		

		

			
				
Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统  Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统  Vue 3.0+Vite 2.0+Vue-Router4.0+...

			
		

	





	

		

			

				
					
电子测量中的航天测控推出虚拟仪器测试开发环境—VITE2.0

				
			

			

				

					11-25
				

			

		

		

			
				
虚拟仪器测试开发环境VITE2.0是北京航天测控技术开发公司针对电子测量领域推出的一款创新性测试解决方案。这款平台旨在满足现代测试系统对于开放性、通用性和可互换性的高要求，以适应从产品研发到生产制造再到使用...

			
		

	





	

		

			

				
					
vite-react-app:Vite 2.0 + React + React-Router + Ant设计开发环境种子项目

				
			

			

				

					03-25
				

			

		

		

			
				
Vite 2.0 + React +蚂蚁设计开发环境搭建 Vite初始化React项目 npm init @vitejs/app vite-react-app --template react  Vite配置 server.port ：开发环境端口配置。  env ：获得环境变量（开发，测试，正式）。  ...

			
		

	





	

		

			

				
					
基于Electron+Vue3+Vite2.0开发的TDengine时序库可视化管理系统源码

					
最新发布

				
			

			

				

					09-26
				

			

		

		

			
				
该项目是一款集电子应用、Vue3框架和Vite2.0构建工具于一体的TDengine时序库可视化管理系统源码。该系统采用TypeScript、Vue、JavaScript、HTML和CSS等多种编程语言开发，总计包含54个文件，其中包含18个TypeScript...

			
		

	





	

		

			

				
					
vue3+vite配置反向代理+结合.env.development文件

				
			

			

				

					m0_56245485的博客
				

				

					12-18
					
					2778
					
				

			

		

		

			
				
参考官网：https://cn.vitejs.dev/config/server-options.html#server-host原理大意：服务器和服务器之间默认是没有跨域限制的，vite通过开启代理服务器充当中间角色，将客户端的请求转发到服务器上，服务器响应后，再将响应结果返回给客户端。注意：vite反向代理仅在开发环境有用，如果打包了，就不会走反向代理了，这是因为打包后vue3项目会被编译成纯前端代码，一般情况下它会被放在和后端一样的ip端口下，这个时候就不会有跨域问题了。


npm run dev 

			
		

	





	

		

			

				
					
vite项目全局配置之env文件

				
			

			

				

					qq_67118860的博客
				

				

					08-11
					
					3222
					
				

			

		

		

			
				
env文件是一个用于存储环境变量的文件。在开发和部署应用程序时，经常需要在不同的环境中配置不同的变量，例如 API 地址、数据库连接信息、密钥等。在许多应用程序中，.env文件通常包含一个或多个键值对，用于存储环境变量。Vite 中的.env文件还可以用于配置构建时的变量需要注意的是，Vite 中的环境变量VITE_。例如，如果您在.env文件中定义了一个名为API_URL的变量，它将不会被 Vite 识别。您应该将其命名为。此外，需要将.env文件放置在关于.env。

			
		

	





	

		

			

				
					
vite中获取.env.xxx中自定义的环境变量

				
			

			

				

					九段刀客的博客
				

				

					05-13
					
					3830
					
				

			

		

		

			
				
1、在业务代码中获取方式
import.meta.env.VITE_APP_BASE_API

2、在vite.config.js中获取方式
import { defineConfig, loadEnv } from "vite";

export default ({ mode }) => {
	server:{
		"/api": {
		   target: loadEnv(mode, process.cwd()).VITE_APP_BASE_API,
		   ws: true,
		   c

			
		

	





	

		

			

				
					
vite配置开发环境和生产环境

				
			

			

				

					qq_42351255的博客
				

				

					06-15
					
					1324
					
				

			

		

		

			
				
【代码】vite配置开发环境和生产环境。

			
		

	





	

		

			

				
					
Vue3+Vite+Js项目搭建之五：.env、.env.development、.env.production 环境变量配置

				
			

			

				

					weixin_64684095的博客
				

				

					03-30
					
					843
					
				

			

		

		

			
				
开发环境配置# 开发环境。

			
		

	





	

		

			

				
					
vite配置环境变量，vue3vite配置环境变量（.env）

				
			

			

				

					weixin_51491855的博客
				

				

					07-11
					
					231
					
				

			

		

		

			
				
选项标志来覆盖命令使用的默认模式。2. 默认情况下，开发服务器 (1. 你可以通过传递。

			
		

	





	

		

			

				
					
vite .env环境变量配置

				
			

			

				

					当然是最帅气的茶茶丸了！哇耶~
				

				

					02-15
					
					5277
					
				

			

		

		

			
				
选项标志来覆盖命令使用的默认模式。文件的，因为这些文件需要在执行完 Vite 配置后才能确定加载哪一个，举个例子，选项会影响加载行为。不过当你的确需要时，你可以使用 Vite 导出的。: {boolean} 应用是否运行在开发环境 (永远与。时运行不同的模式来渲染不同的标题，你可以通过传递。: {string} 部署应用时的基本 URL。: {boolean} 应用是否运行在生产环境。默认情况下，开发服务器 (: {boolean} 应用是否运行在。在某些情况下，若想在。: {string} 应用运行的。

			
		

	





	

		

			

				
					
vite项目怎么配置环境变量dev

				
			

			

				

					09-10
				

			

		

		

			
				
在Vite项目中配置环境变量（如dev环境），通常会在`.env`文件中进行设置。这是一个隐藏的文本文件，Vite会自动查找并加载其中的环境变量供应用使用。如果你想创建一个名为`dev`的环境变量，可以按照以下步骤操作：  ...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		
评论 1

	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值