在看项目的过程中    
    
    
    ，发现有类似服务端多环境配置的配置     


     


     


     


，所以研究了下




 




 




 




，在网上有多个方案
   

   

   

   ，选了一个当前在用的吧     

     

     

     

，另外一个没验证

1    
    
    
    
、原理

对于使用Vite构建的Vue项目 




  




  




  




，可以使用Vite提供的环境变量来实现多环境配置    
    
    
    
。

Vite 使用 dotenv 从 环境文件目录 中加载环境文件

  


  


  


  ，默认情况下     
     
     
     
，环境文件目录为项目的根目录  




   




   




   




，即把环境文件放在项目根目录下


     


     


     


    。

环境文件命名如下：

.env # 所有情况下都会加载 .env.local # 所有情况下都会加载


 



 



 



 ，但会被 git 忽略 .env.[mode] # 只在指定模式下加载 .env.[mode].local # 只在指定模式下加载                    ，但会被 git 忽略

不同环境的变量可以定义在 .env.[mode] 文件中   




    




    




    




，如 .env.dev


     


     


     


    、.env.prod 等


















，如果 .env 文件和 .env.[mode] 中有相同的 key                    ，后者定义的值会覆盖前者
 




 




 




 


。

这里咱们以三个环境为例编写 demo    



     



     



     



，分别是：

开发环境



















，mode 为 dev    
    
    
    ，文件名为 .env.dev 测试环境     


     


     


     


，mode 为 uat




 




 




 




，文件名为 .env.uat 生产环境
   

   

   

   ，mode 为 prod     

     

     

     

，文件名为 .env.prod

2
 




 




 




 


、创建配置文件 

使用 .env 文件来设置特定环境的变量   

   

   

   

。Vite 会自动加载 .env 文件 




  




  




  




，而且支持使用不同的 .env 文件来为不同的环境提供变量 

     

     

     

   。

在项目根目录下创建.env.dev   

   

   

   

、.env.test和.env.prod等环境变量文件

  


  


  


  ，并在其中定义各个环境的变量

  




  




  




  

。例如：

NODE_ENV="development" VITE_BASE_API="http://172.26.1.152:80" VITE_BASE_WS="ws://172.26.1.152:18083"

注意     
     
     
     
，变量名必须以VITE_开头  




   




   




   




，这是Vite默认的前缀  


  


  


  


。

3 

     

     

     

   、使用多环境配置

package.json中配置启动脚本


 



 



 



 ，使用配置

"scripts": { "dev": "vite --mode dev", "test": "vite --mode test", "prod": "vite --mode prod", "build": "vue-tsc && vite build", "build:dev": "vue-tsc --noEmit && vite build --mode dev", "build:prod": "vue-tsc --noEmit && vite build --mode prod", "preview": "vite preview" },

4

  




  




  




  

、使用环境变量

在Vue组件中使用环境变量：

<template> <div> <p>{{ apiURL }}</p> </div> </template> <script> export default { data() { return { apiURL: import.meta.env.VITE_BASE_API } } } </script>

在Vue组件中可以通过import.meta.env.VITE_API_URL来访问环境变量  
     
     
     
  。

5  


  


  


  


、关于编辑器提示

可以添加 vite-env.d.ts解决


   




   




   




   
。如果不存在这个文件                    ，在 src 目录下创建文件 vite-env.d.ts   




    




    




    




，我的项目下有


















，不记得是不是自己手动创建了

/// <reference types="vite/client" /> ​ interface ImportMetaEnv { readonly VITE_BASE_API: string; readonly VITE_BASE_WS: string; } ​

6  
     
     
     
  、最后验证下

main.ts 打印下环境变量

客户端访问                    ，打开控制台可以看到环境变量    



     



     



     



，试着切换下看看生效了吗

7


   




   




   




   
、process.env和import.meta.env

process.env是Node.js中的全局变量



















，用于访问进程中的环境变量 



 



 



 



。在前端开发中    
    
    
    ，我们通常使用Webpack等构建工具来打包应用程序     


     


     


     


，因此需要在构建过程中设置环境变量                   。在Webpack中




 




 




 




，可以使用DefinePlugin插件将环境变量注入到应用程序中
   

   

   

   ，然后在代码中通过process.env来访问这些变量



    




    




    




    。

例如     

     

     

     

，在Webpack中设置一个名为API_URL的环境变量 




  




  




  




，可以在代码中通过process.env.API_URL来访问它：

// webpack.config.js module.exports = { plugins: [ new webpack.DefinePlugin({ process.env.API_URL: JSON.stringify(https://api.example.com) }) ] } // app.js console.log(process.env.API_URL) // https://api.example.com

import.meta.env是在ES模块中定义的全局变量

  


  


  


  ，用于访问Vite构建的应用程序中的环境变量



















。在Vite中     
     
     
     
，可以在.env文件中定义环境变量  




   




   




   




，然后在Vue组件和JavaScript模块中通过import.meta.env来访问这些变量                   。

需要注意的是


 



 



 



 ，process.env和import.meta.env的作用域不同                    ，前者作用于整个Node.js进程   




    




    




    




，后者只作用于当前的JavaScript模块或Vue组件



     



     



     



     。因此


















，它们的用法和使用场景也有所不同


















。

推荐一本书

树立正确的Git观念                    ，可以让你在工作中选用正确的Git指令    
    
    
    
。 终端机指令搭配图行界面工具    



     



     



     



，使学习效率倍增


     


     


     


    。 不只教你如何用



















，还能让你知道自己在用什么    
    
    
    ，以及为什么要这么用
 




 




 




 


。

京东自营购买链接：

《Git从入门到精通》(高见龙)【摘要 书评 试读】- 京东图书