关于vue3:vite-vue3-项目通过-importmetaenv-获取自定义的变量

最近应用 vite + vue3 开发新我的项目，遇到非 vite.config.js 文件，通过 import.meta.env 获取不到 .env.[mode] 文件自定义变量的问题，心愿此文章能够帮忙更多遇到此问题的小伙伴！

怎么解决此问题？

不卖关子了，间接上解决方案，既然间接通过 import.meta.env 拿不到，咱们能够尝试通过 process.env 的形式来获取。

具体做法如下：

1. 新建一个 loadEnv.js 的文件；

   import * as dotenv from 'dotenv'
   
   // 通过 dotenv 配置须要加载指定 .env 文件，这样 process.env 打印到得就是对应得文件了
   // 这里的 mode 是咱们启动时候的参数，npm run build:test 失去的 mode 就是 test
   export function loadEnv(mode) {const ret = {}
     // 在应用之前咱们先指定加载哪个环境变量
     dotenv.config({path: `.env.${mode}`
     })
   
     Object.keys(process.env).forEach(envName => {const realName = process.env[envName].replace(/\\n/g, '\n')
        ret[envName] = realName
        // 向 process.env 上扩大咱们定义的 VITE 环境变量
        process.env[envName] = realName
     })
     return ret
   }

2. 装置 dotenv 帮忙咱们加载指定的环境变量；

   npm i dotenv -D

3. 在我的项目根目录下创立如下文件

.env.deveopmemt // 开发环境
.env.test // 测试环境
.env.staging // 预上线环境
.env.production // 生产环境 

4. 在 package.json 中增加如下脚本

   "scripts": {
     "dev": "vite",
     "build:test": "vite build --mode test",
     "build:release": "vite build --mode staging",
     "build": "vite build --mode production",
   }

5. vite.config.js 中引入 loadEnv.js

   import {defineConfig} from 'vite'
   
   import {loadEnv as myLoadEnv} from './loadEnv.js'
   
   export default defineConfig(({command, mode}) => {myLoadEnv(mode)
      return {// 增加须要的内容，此处省略}
   })

6. 这时候如果咱们要在 api.js 中应用自定义的变量，能够这样应用

   const baseURL = import.meta.env.VITE_BASE_URL
   const service = axios.create({
     baseURL,
     timeout: 10 * 1000,
   });

本文完，小伙伴来实际一下吧！