vite + vue3 项目通过 import.meta.env 获取自定义的变量你是否也遇到了 vite + vue3

我正在参加「掘金·启航计划」

最近在使用 vite + vue3 开发新项目时，遇到了一个比较棘手的问题：在非 vite.config.js 文件里，通过 import.meta.env 获取不到 .env.[mode] 文件自定义变量。思索再三小编找到了解决方案，在此分享给大家，希望此文章可以帮助更多遇到此问题的小伙伴们！

怎么解决此问题呢？

不卖关子了，直接上干货，直接上解决方案。既然直接通过 import.meta.env 拿不到我们需要的自定义变量，我们可以尝试换一条思路，通过 process.env 的方式来获取。

方法一：具体做法如下

安装 dotenv 帮助我们加载指定的环境变量；

npm i dotenv -D

新建一个 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}`
    })
    dotenv.config({
        path: `.env`, // .env
    })

    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
}

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

在package.json 中添加如下脚本

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

vite.config.js 中引入 loadEnv.js

import { defineConfig } from 'vite'

import { loadEnv as myLoadEnv } from './loadEnv.js'

export default defineConfig(({ command, mode }) => {
    myLoadEnv(mode)
    return {
        // 添加需要的内容，此处省略
    }
})

这时候如果我们要在 api.js 中使用自定义的变量，可以这样使用

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

方法二：比较简单。

修改 vite.config.js，将 env 放在 define.process.env 属性下面。

import { defineConfig, loadEnv } from 'vite'
export default defineConfig(({ command, mode }) => {
  const env = loadEnv(mode, process.cwd())
  return {
    define: {
      'process.env': env,
    },
  }
})

如果我们要在 api.js 中使用自定义的变量，可以这样使用

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

本文完，小伙伴们快来实践一下吧！