Vue技术栈2024-01-12 · 约 2 分钟

Vue3中Vite给不同接口环境不同的打包命令

暮色陈陈49 阅读0 赞0 评论最后更新 2026-09-16

一、新建.env文件

text 复制代码

.env.development 开发环境下的配置文件
.env.test 测试环境下的配置文件
.env.prod 生产环境下的配置文件

二、编辑.env文件

text 复制代码

# .env.development文件内容
NODE_ENV=dev
VITE_NAME='开发环境'
VITE_API="http://127.0.0.1:9011/api"

# .env.test文件内容
NODE_ENV=test
VITE_NAME='测试环境'
VITE_API="http://你的ip/api"

# .env.prod文件内容
NODE_ENV=prod
VITE_NAME='生产环境'
VITE_API="http://你的ip/api"

三、编辑package.json

js 复制代码

 scripts": {
    "dev": "vite",
    "build": "vite build",
    "test": "vite --mode test",
    "build:test": "vite build --mode test",
    "prod": "vite --mode prod",
    "build:prod": "vite build --mode prod"
  }

四、获取环境配置

javascript 复制代码

使用 import.meta.env

觉得有用就点个赞吧