Vue3 —— 使用Vite配置环境变量
文章目录
- 一、为什么要配置环境变量?
- 二、在Vite中配置环境变量
- 1.环境变量和模式
- 2.环境变量
- 3.生产环境替换
- 4.
env文件
- 总结
一、为什么要配置环境变量?
在一个产品的前端开发过程中，一般来说会经历本地开发、测试脚本、开发自测、测试环境、预上线环境，然后才能正式的发布。对应每一个环境可能都会有所差异，比如说用户访问资源权限、服务器地址、接口地址等。在各个环境切换的时候，就需要不同的配置参数，所以就可以用环境变量和模式，来方便我们管理。
二、在Vite中配置环境变量
1.环境变量和模式
因为项目使用VIte创建的，所以在配置环境变量之前我们需要查看在Vite中的环境变量和模式，官网地址
2.环境变量
Vite 在一个特殊的
import.meta.env对象上暴露环境变量。这里有一些在所有情况下都可以使用的内建变量：
import.meta.env.MODE: {string} 应用运行的模式。
import.meta.env.BASE_URL: {string} 部署应用时的基本 URL。他由base 配置项决定。
import.meta.env.PROD: {boolean} 应用是否运行在生产环境。
import.meta.env.DEV: {boolean} 应用是否运行在开发环境 (永远与import.meta.env.PROD相反)。
import.meta.env.SSR: {boolean} 应用是否运行在 server 上。
3.生产环境替换
在生产环境中，这些环境变量会在构建时被静态替换，因此，在引用它们时请使用完全静态的字符串。动态的 key 将无法生效。例如，动态 key 取值
import.meta.env[key]是无效的。
4.env 文件
在根目录下新建这两个文件
.env.dev 文件
NODE_ENV = dev VITE_NAME="LJY"
.env.pro 文件
NODE_ENV = pro VITE_NAME="LJY"
Vite 使用 dotenv 从你的 环境目录 中的下列文件加载额外的环境变量：
环境加载优先级
一份用于指定模式的文件（例如
.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 变量的前缀，请参阅 envPrefix。
安全注意事项
如果你想要自定义 env 变量的前缀，请参阅 envPrefix 选项。
.env.*.local文件应是本地的，可以包含敏感变量。你应该将.local添加到你的.gitignore中，以避免它们被 git 检入。由于任何暴露给 Vite 源码的变量最终都将出现在客户端包中，
VITE_*变量应该不包含任何敏感信息。
Vue3 —— 使用Vite配置环境变量相关推荐
- 如何配置mac的mysql环境_mac安装mysql数据库及配置环境变量
安装mysql 下载mysql.我下载的是:mysql-8.0.11-macos10.13-x86_64.dmg 双击打开mysql-8.0.11-macos10.13-x86_64.dmg,然后双击 ...
- centos7给MySQL配置环境变量
centos7给MySQL配置环境变量 配置好了环境变量,就可以不用每次想要使用mysql时都要到/usr/local/mysql/bin,所以需要配置以下环境变量 编辑配置文件,加入环境变量 Vi ...
- linux怎么安装java环境变量_如何简单的在linux上安装jdk并配置环境变量
这篇文章是为了给我一会自己安装的时候方便使用的,所以内容很简单,平时在wendows系统上安装很容易,但是换到linux系统上面就蒙圈了. 一.下载jdk文件 下载完成后你得到了 我们将这个文 ...
- java基础学习总结一(java语言发展历史、jdk的下载安装以及配置环境变量)
最近一段时间计划复习一下java基础知识,使用的视频课程是尚学堂高淇老师的,上课过程中的心得体会 直接总结一下,方便以后复习. 一:计算机语言的发展 1:机器语言,最原始的语言,主要有"01 ...
- tomcat下载与安装..使用和配置环境变量
操作环境: xp, myEclipse6.5 tomcat6.0 正文: 一.下载 tomcat官方网站 http://tomcat.apache.org 在左边Download树形菜单中 点击最新版 ...
- Mac下安装JDK以及怎么配置环境变量？
一.先下载JDK,下载链接:https://www.oracle.com/java/technologies/javase/javase-jdk8-downloads.html 二.安装,双击即可自动 ...
- java开发环境配置环境变量_3. Java开发环境的搭建：安装JDK，配置环境变量
1.安装JDK开发环境 开始安装JDK: 修改安装目录如下: 确定之后,单击"下一步". 注:当提示安装JRE时,可以选择不要安装. 2.配置环境变量: 对于Java程序开发而言, ...
- Java 学习（1） ---JDK安装和配置环境变量
一,Java 开发的第一步,就是安装JDK(Java Development ToolKit Java开发工具包) JDK 是Java开发的核心,因为它包括Java 运行环境,工具包和命令.当我们安 ...
- anaconda3配置环境变量_Python：Anaconda安装及LabelMe配置（1）
目录 一.开发工具下载 二.安装过程 三.检测安装成功 四.安装LabelMe环境 一.开发工具下载 官网下载地址:https://www.anaconda.com/products/individu ...
最新文章
- Linux服务器---安装tftp-server
- 如何正确地修改.data和.item文件的‘utf-8’格式
- cherry-pick的用法
- c++读取excel_Java 嵌入 SPL 轻松实现 Excel 文件合并
- hadoop误删除文件
- 最短路中部分点只能从中任意选取K个问题
- Kotlin的基本数据类型
- oracle asm 日志,oracle 11g RAC 下ASM实例的alert日志告诉我们什么
- abd串口工具使用教程_adb调试工具包(adb调试程序)
- 送给女朋友的圣诞节电子贺卡源代码，圣诞节快乐代码
- 服务器被攻击了怎么办
- pyttsx3设置男性声音
- OC不可变字符串和可变字符串（1）
- DllNotFoundException
- patch 和 put 方法区别
- 公布一下各类学术杂志的审稿费、版面费
- 解决IDEA 前端返回值乱码问题
- netmq VS redis 订阅发布性能研究
- 2014年最新720多套Android源码2.0GB免费一次性打包下载
- Viso插入Word后空白过多解决方法