02-配置Vite2环境变量

Vite2+Vue3+TypeScript+Element-plus脚手架搭建系列

✅01-初始化 Vite 项目
✅02-配置 Vite2 环境变量
✅03-Vite2 配置及说明
✅04-Vue3 使用 SCSS
✅05-Vue3 路由配置
✅06-TypeScript 配置及说明
✅07-Vue3 使用 axios
✅08-Vue3 axios 对象封装
✅09-ESLint 配置及说明
✅10-ESLint 与 Prettier 集成配置及说明
✅11-Mock.js 模拟接口数据
✅12-Vite2 引入 Element-Plus 框架
✅13-渐变+透明样式实现清爽登录页
✅14-Element-Plus 实现后台管理系统布局
✅15-Pinia 实现 store 状态管理
✅16-Vue3 动态路由权限控制

源码地址：GitHub / 码云

配置Vite2环境变量

🎯 目标

获取 development 模式下的内建环境变量和自定义环境变量。

😴 功课

.env文件

Vite 在你的项目根目录下从以下文件加载额外的环境变量。

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

加载的环境变量会通过 import.meta.env 暴露给客户端源码。

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

例如下面这个文件中：

DB_PASSWORD = foobar
VITE_SOME_KEY = 123

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

由于暴露在 Vite 源码中的任何变量都将最终出现在客户端包中， VITE_* 变量应该不包含任何敏感信息。

💡 .env.*.local 文件应是本地的，可以包含敏感变量。你应该加上 *.local 到你的 .gitignore 以避免他们被上传到 git。

运行模式

Vite项目创建以后，默认有三个运行脚本，如下所示：

"scripts": {
  "dev": "vite",
  "build": "vue-tsc --noEmit && vite build",
  "serve": "vite preview"
}

serve 或者 dev 命令运行在 development （开发）模式，而 build 命令运行在 production （生产）模式。

这意味着当执行 npm run dev 时，它会自动加载 .env.development 中的环境变量：

# .env.development
VITE_APP_TITLE = My App

在应用中可以使用 import.meta.env.VITE_APP_TITLE 作为渲染标题。

可以通过传递 --mode 选项标志来覆盖命令使用的默认模式。例如，如果你想为我们假设的test模式构建应用：

npm run build --mode test

这时需要有一个 .env.test 文件。

内置变量

Vite 在 import.meta.env 对象上暴露环境变量。下面有一些常用的内建变量：

• import.meta.env.MODE: string 应用当前运行的模式。
• import.meta.env.BASE_URL: string 应用正被部署在的 base URL。它由 base 配置项决定。
• import.meta.env.PROD: boolean 应用是否运行在生产环境。
• import.meta.env.DEV: boolean 应用是否运行在开发环境。

🌈 Coding

创建 env 文件

在项目根目录下新建 .env.development 文件，代码如下：

# 主机名
VITE_HOST = 127.0.0.1

# 端口号
VITE_PORT = 3000

# 基础路径
VITE_BASE_URL = '/api'

💡 修改环境变量后要重启项目才能生效。

读取环境变量

在 HelloWorld.vue 读取环境变量，代码如下：

<template>
  <!-- ↓环境变量demo -->
  <div>
    <h2>环境变量</h2>
    mode: {{ mode }} <br />
    host: {{ host }} <br />
    port: {{ port }} <br />
    baseUrl: {{ baseUrl }}
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "HelloWorld",
  setup() {
    // ↓读取内建环境变量
    const mode = import.meta.env.MODE;
    // ↓读取自定义环境变量
    const host = import.meta.env.VITE_HOST;
    const port = import.meta.env.VITE_PORT;
    const baseUrl = import.meta.env.VITE_BASE_URL;
    // ↓返回变量，使支持template获取
    return {
      mode,
      host,
      port,
      baseUrl,
    };
  },
});
</script>

🎭 结果

页面显示4个环境变量的值。分别为：“development”、“127.0.0.1”、“3000”、“/api”。

本文为博主原创文章，任何个人、团体、机构转载和摘录，请注明出处。