vue3 .env 环境变量的配置及应用

1. 什么是 .env文件

.env文件时运行项目的配置文件，用于分类存储不同环境下的不同配置

2. 如何使用 .env文件

1）生成

在项目根目录下新建 【.env】【.env.dev】【.env.pro】文件

文件格式	描述
.env	全局配置文件，无论什么环境都会加载
.env.dev	开发环境的配置文件
.env.pro	生产环境的配置文件

.env文件内容

# port 端口号
VITE_PORT  = 8888

# open 运行 npm run dev 时自动打开浏览器
VITE_OPEN = false

.env.dev文件内容

# 开发环境
VITE_ENV = 'development'

# 开发接口地址
VITE_API_URL = 'http://1.2.3.4:8098'

# 数据管理地址
VITE_API_DATA = 'http://1.2.3.4:8098/data-management'

.env.pro文件内容

# 开发环境
VITE_ENV = 'development'

# 开发接口地址
VITE_API_URL = 'http://2.2.2.2:1234'

# 数据管理地址
VITE_API_DATA = 'http://2.2.2.2:1234/data-management'

2）生效

在package.json中修改 scripts部分内容

  "scripts": {
    "dev": "vite --mode dev",
    "pro": "vite --mode pro",
    "build:dev": "vite build --mode dev",
    "build:pro": "vite build --mode pro",
    "preview": "vite preview"
  },

注意：mode模式名称应与env文件后缀保持一致

2）使用

在页面中可直接使用，读取方法如下

console.log( import.meta.env.VITE_API_URL)