vite+vue3环境变量配置

1. 设置.env中的配置

注意vue3+vite 必须使用VITE开头的配置信息 否则无法获取

在项目根目录新建.env.dev, .env.prod .env.dev 本地开发环境

VITE_NODE_ENV=dev
VITE_APP_URL=http://127.0.0.1:3000

.env.prod 线上环境

VITE_NODE_ENV=prod
VITE_APP_URL=http://online.com

2. 在package.json中配置

  "scripts": {
    "dev": "vite --mode dev",
    "build": "run-p type-check build-only --mode prod"
  },

3. 在页面中使用

比如上面设置的2个环境变量，可以通过

使用 import.meta.env.VITE_NODE_ENV 获取环境变量
import.meta.env.VITE_APP_URL 获取