Vite 项目中环境变量的配置和使用

Vite 项目中环境变量的声明

我们要在 Vite 项目中进行环境变量的声明,那么需要在项目的根目录下,新建 .env.[mode] 文件用于声明环境变量,如:

  • .env.test 文件用于测试环境下项目全局变量的声明
  • .env.dev 文件用于开发环境下项目全局变量的声明
  • .env.prod 文件用于生产环境下项目全局变量的声明

其中 mode 是在 vite 启动项目时使用的环境模式名称。

需要注意的是,我们在 .env.[mode] 文件中声明的环境变量需要以 VITE_ 开头

复制代码
# 环境
VITE_ENV = 'dev'

# 服务端 IP
VITE_SERVER_HOST = "127.0.0.1"
# 服务端服务程序端口号
VITE_SERVER_PORT = 8080

# ...

启动运行项目并指定环境模式

我们在 package.json 中启动运行项目的脚本命令中,可以使用 --mode 参数指定我们要使用的环境模式,环境模式名称即 .env.[mode] 文件名中的 mode,如:

json 复制代码
  "scripts": {
    "dev": "vite --open --mode=dev",
    "test": "vite --open --mode=test",
    "build": "vue-tsc && vite build --mode=prod",
    "preview": "vite preview --open"
  },

然后,我们执行相应的脚本命令就会会启用相应的环境变量文件。

在 js/ts 文件中使用环境变量

在 js/ts 文件中通过 import.meta.env.环境变量名 获取相应环境变量的值

typescript 复制代码
const env: string = import.meta.env.VITE_ENV
console.log(`当前的环境为 ${env}`)

在 html 文件中使用环境变量

在 html 文件中通过 %环境变量名% 获取相应环境变量的值

在标签体中使用

html 复制代码
  <body>
    <h1>当前的环境为 %VITE_ENV%</h1>
  </body>

在标签属性中使用

html 复制代码
<body>
  <img src="asdasda" alt="当前的环境为 %VITE_ENV%">
  <div id="app"></div>
  <script type="module" src="/src/main.ts"></script>
</body>
相关推荐
二十雨辰5 分钟前
歌词滚动效果
前端·css
法医7 分钟前
和文心快码做朋友,让编程像“说话”一样简单
前端·文心快码
前端小巷子10 分钟前
JS 打造「放大镜 + 缩略图」一体组件
前端·javascript·面试
陈随易11 分钟前
适合中国宝宝的AI编程神器,文心快码
前端·后端·node.js
知识分享小能手15 分钟前
React学习教程,从入门到精通,React AJAX 语法知识点与案例详解(18)
前端·javascript·vue.js·学习·react.js·ajax·vue3
UrbanJazzerati27 分钟前
掌握 DOM 的基础属性与方法:从操作元素到构建动态效果
前端·面试
朗迹 - 张伟1 小时前
Gin-Vue-Admin学习笔记
vue.js·学习·gin
hashiqimiya1 小时前
html实现右上角有个图标,鼠标移动到该位置出现手型,点击会弹出登录窗口。
前端·html
古夕1 小时前
前端文件下载的三种方式:a标签、Blob、ArrayBuffer
前端·javascript·vue.js