前端工程环境变量配置

以Vite为例

1.创建.env环境变量文件

在根目录创建

文件内容：

# 生产环境下的环境变量配置
# 变量命名需要 VITE_ 作为开头

# app title
VITE_APP_TITLE=生产

# baseUrl
VITE_BASE_API=http://127.0.0.2

2.配置package.json

// 把环境变量[]通过 --mode 传入
"scripts": {
    "start:dev": "vite --mode=development --host",
    "start:prod": "vite --mode=production --host",
    "start:test":"vite --mode=test --host",
    "build:test": "vue-tsc && vite build --mode=test",
    "build:prod": "vue-tsc && vite build --mode=production",
    "build:dev": "vue-tsc && vite build --mode=development",
  },

3.当执行script中的内容时 mode 会被传入vite.config.ts 文件中的defineConfig，作为回调函数的参数

vite执行打包时可以看到我们传入的mode

还可以通过

const TARGET = import.meta.env.VITE_BASE_API  // 也可以拿到

ps：

• –mode 传入的值 对应的应该是文件名比如： .env.{–mode} ;
• 传入 --mode=test 对应就是 .env.test中的内容