在vue开发中如何利用.env文件

前言

我们在 vue 项目的目录中经常看到 env 开头的文件,在文件内声明一些变量,这些变量就是一些配置变量,在不同环境下可使用的变量。

js 复制代码
# 页面标题
VITE_APP_TITLE = 管理系统

# 开发环境配置
VITE_APP_ENV = 'development'

# 管理系统/开发环境
VITE_APP_BASE_API = '/'

环境

项目的运行不止在我们敲代码的时候,还在正式使用时等等,在这些情况我们区分为有本地环境、测试环境、预生产、生产环境等等。

在这不同环境下,代码运行的情况肯定是不一样的,这个时候就需要 env 文件,来控制其中变化的情况,实现差异性配置。

env 命名

通常 env 文件命名如下:

  • .env 所有环境(开发、测试、生成等)均会加载并合并该文件。
  • .env.development 开发环境
  • .env.production 生产环境

其中.env、.env.development、.env.production 文件的命名为固定格式,不能改变,否则读取不到文件。

文件读取

package.json vue 中所需要的的依赖会根据该文件来安装。

  • scripts:支持的脚本
  • dependencies: 生产环境依赖包列表
  • devDependencies: 开发环境、测试环境依赖包列表

而在 package.json 文件中 有 scripts字段用来定义脚本命令, Vue 会根据启动命令自动加载对应的环境配置文件。其中的属性是用来运行 npm run 命令的,属性名可以随意更改;而属性的值,才是真正运行的命令,是固定的。

js 复制代码
"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build --mode development",
    "build:pro": "vue-cli-service build --mode production",
    "build:test": "vue-cli-service build --mode test",
  },

配置环境变量

该文件注释用 # 号开头,定义变量直接是 属性 = 值。

js 复制代码
# 页面标题
VITE_APP_TITLE = 管理系统

# 环境配置
VITE_APP_ENV = 'development'

# api 基础路径
VITE_APP_BASE_API = '/dev-api'
// 或
VUE_APP_BASE_API = '/dev-api'

使用

我们知道了在不同环境下使用相应 env 文件中的变量,那么想要在项目中使用该变量要怎么做呢?

在项目中,如果我使用的是 vite ,要想在项目中使用变量的开头就需要是 VITE_,而不是 VITE_ 开头的变量就不能被获取到。

js 复制代码
// 在 vite 程序中获取
console.log(import.meta.env.VITE_APP_BASE_API); // /dev-api
// 在 vue2 项目中获取
console.log(process.env.VUE_APP_BASE_API); // /dev-api

在 vite 中对于不支持 import.meta.env来获取变量,我们可以使用 Vite 导出的 loadEnv 函数来加载指定的 .env 文件

js 复制代码
import { defineConfig, loadEnv } from 'vite'

export default defineConfig(({ command, mode }) => {
  // 根据当前工作目录中的 `mode` 加载 .env 文件
  // 如果当前环境是开发环境,则 mode 为 development
  // 设置第三个参数为 '' 来加载所有环境变量,而不管是否有 `VITE_` 前缀。
  const env = loadEnv(mode, process.cwd(), '')
  const { VITE_APP_BASE_API } = env // VITE_APP_BASE_API = /dev-api
  return {
    // vite 配置
    define: {
      __APP_ENV__: JSON.stringify(env.APP_ENV),
    },
  }
})

总结

  • 默认情况下 .env 文件要放在和 package.json 同一目录下才可以被加载,除非在配置文件中更改加载目录。
  • 不同的环境会加载不同的 .env 文件。
  • 要想使用环境变量,变量的开头有固定要求,在 vite 项目中以 VITE_ 开头,在 vue2 项目中以 VUE_APP 开头。
相关推荐
前端小趴菜051 小时前
React-React.memo-props比较机制
前端·javascript·react.js
摸鱼仙人~2 小时前
styled-components:现代React样式解决方案
前端·react.js·前端框架
sasaraku.3 小时前
serviceWorker缓存资源
前端
RadiumAg4 小时前
记一道有趣的面试题
前端·javascript
yangzhi_emo4 小时前
ES6笔记2
开发语言·前端·javascript
yanlele4 小时前
我用爬虫抓取了 25 年 5 月掘金热门面试文章
前端·javascript·面试
中微子5 小时前
React状态管理最佳实践
前端
烛阴6 小时前
void 0 的奥秘:解锁 JavaScript 中 undefined 的正确打开方式
前端·javascript
中微子6 小时前
JavaScript 事件与 React 合成事件完全指南:从入门到精通
前端
Hexene...6 小时前
【前端Vue】如何实现echarts图表根据父元素宽度自适应大小
前端·vue.js·echarts