最近在使用vite+vue3开发新项目时，遇到一个棘手的问题：在非vite.config.js文件中，通过import。meta.env无法获取.env.[mode]文件自定义变量。思前想后，小编找到了解决办法，在此分享给大家。希望这篇文章可以帮助到更多遇到这个问题的朋友！如何解决这个问题呢？不卖了，直接上干货，直接上解决方案。由于我们需要的自定义变量无法通过import.meta.env直接获取，我们可以尝试另一种思路，通过process.env获取。具体方法如下：安装dotenv帮我们加载指定的环境变量；npmidotenv-D创建一个新的loadEnv.js文件；import*asdotenvfrom'dotenv'//通过dotenv配置需要加载指定的.env文件，所以处理。打印出来的env就是对应的文件//这里的mode就是我们启动时的参数，npmrunbuild:test得到的mode是testexportfunctionloadEnv(mode){constret={}//我们在使用前指定使用哪个环境变量加载dotenv.config({path:`.env.${mode}`})dotenv.config({path:`.env`,//.env})Object.keys(process.env).forEach(envName=>{constrealName=process.env[envName].replace(/\\n/g,'\n')ret[envName]=realName//将我们定义的VITE环境变量process扩展到process.env.env[envName]=realName})returnret}在项目根目录下创建如下文件.env.deveopmemt//开发环境.env.test//测试环境.env.staging//预启动环境.env.production//生产环境environment在package.json中添加如下脚本"scripts":{"dev":"vite","build:test":"vitebuild--modetest","build:release":"vitebuild--modestaging”，“构建”t;:"vitebuild--modeproduction",}vite.config.jsimportloadEnv.jsimport{defineConfig}from'vite'import{loadEnvasmyLoadEnv}from'./loadEnv.js'exportdefaultdefineConfig(({命令,mode})=>{myLoadEnv(mode)return{//添加需要的内容，此处省略}})这时候如果我们想在api.js中使用自定义变量，可以这样使用constbaseURL=import.meta.env.VITE_BASE_URLconstservice=axios.create({baseURL,timeout:10*1000,});本篇到此结束，小伙伴们快来实践吧！
