✅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 / 码云
获取 development 模式下的内建环境变量和自定义环境变量。
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
应用是否运行在开发环境。在项目根目录下新建 .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”。
本文为博主原创文章,任何个人、团体、机构转载和摘录,请注明出处。