VUE3+VITE 关于环境变量的设置 BUG

VUE3+VITE 关于环境变量的设置 BUG

开始使用VUE的webpack的方式始终取不到值，

VUE_BASE_URL=xxx

使用

process.env.VUE_BASE_URL

结果：

undefined

一查百度，全是和我写的一样的，但还是没有用，到底什么原因？

一想我TM用的VITE啊，所以就去看了看VITE的文档，发现VITE的环境变量也有格式要求。

以下内容来自VITE文档：

Vite 使用 dotenv 从你的 环境目录 中的下列文件加载额外的环境变量：

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

环境加载优先级

一份用于指定模式的文件（例如 .env.production）会比通用形式的优先级更高（例如 .env）。

另外，Vite 执行时已经存在的环境变量有最高的优先级，不会被 .env 类文件覆盖。例如当运行 VITE_SOME_KEY=123 vite build 的时候。

.env 类文件会在 Vite 启动一开始时被加载，而改动会在重启服务器后生效。

加载的环境变量也会通过 import.meta.env 以字符串形式暴露给客户端源码。

为了防止意外地将一些环境变量泄漏到客户端，只有以 VITE_ 为前缀的变量才会暴露给经过 vite 处理的代码。例如下面这些环境变量：

VITE_SOME_KEY=123
DB_PASSWORD=foobar

只有 VITE_SOME_KEY 会被暴露为 import.meta.env.VITE_SOME_KEY 提供给客户端源码，而 DB_PASSWORD 则不会。

console.log(import.meta.env.VITE_SOME_KEY) // 123
console.log(import.meta.env.DB_PASSWORD) // undefined

所以，建一个env.dev文件写入：

VITE_SOME_KEY=http://localhost:8080

并且在package.json文件中启动加入模式，

"scripts": {
    "dev": "vite --mode dev",
    "build": "vite build",
    "preview": "vite preview --port 4173",
    "test:unit": "vitest --environment jsdom",
    "test:e2e": "start-server-and-test preview http://localhost:4173/ 'cypress open --e2e'",
    "test:e2e:ci": "start-server-and-test preview http://localhost:4173/ 'cypress run --e2e'"
  },

你是懂Vite的（bushi)