vue 3 第三十六章：vite环境变量（.env文件的配置及使用）

您所在的位置：网站首页 › 我们可以使用什么命令来查看导出的环境变量 › vue 3 第三十六章：vite环境变量（.env文件的配置及使用）

vue 3 第三十六章：vite环境变量（.env文件的配置及使用）

2023-06-14 19:57| 来源: 网络整理| 查看: 265

文章目录 1. 环境变量使用场景2. 创建`.env`文件3. 在应用程序中使用环境变量3.1. 输出结果（开发环境）：3.2. 输出结果（生产环境）： 4. 在 vite 中使用环境变量

1. 环境变量使用场景区分不同的环境。在Vite中，我们可以使用环境变量来管理不同环境下的配置。Vite支持使用.env文件来配置环境变量，不同的环境可以使用不同的.env文件来管理配置。当做全局变量使用。用来判断是开发或者测试环境，展示不用的页面、按钮等等。 2. 创建.env文件

首先，我们需要在项目的根目录下创建.env文件。.env文件中可以定义各种环境变量，例如API的地址、端口号等等。以下是一个简单的.env文件示例：

VITE_APP_DEV = 'dev-api' VITE_APP_URL = 'http://192.168.0.0.1/api'

注意：在vite中环境变量必须以VITE开头

在这里插入图片描述

3. 在应用程序中使用环境变量

要在Vite的应用程序中使用环境变量，我们可以使用importa.env对象来访问它们。例如，在组件中可以使用以下方式访问VITE_APP_TITLE环境变量：

// 在组件中可以通过这种方式来访问 console.log(importa.env); 3.1. 输出结果（开发环境）：

在这里插入图片描述

3.2. 输出结果（生产环境）：运行 npm run build 打包项目，生成 dist 文件运行 npm install http-server -g 安装 http-server。（由于dist文件本地直接打开会跨域（file文件协议不允许跨域），因此需要启动一个后台服务）运行 http-server -p -o，启动后台服务打开页面后，此时查看浏览器控制台就可以看到如下的输出信息

此处启动后台服务方式很多。可以使用http-server，也可以使用nginx等其他方式

在这里插入图片描述