vue3+vite通过命令动态切换后端接口地址

1.首先确保是在项目中存在.env  xxx 文件

2.在.env.xxx文件中,可以自己定义一些变量

###
 # @Author: zhanggengchen
 # @Date: 2024-05-31 17:26:59
 # @LastEditTime: 2024-07-16 11:54:41
 # @LastEditors: zhanggengchen
 # @Description: 
 # @FilePath: \strategy-vue\.env.development
 # 文件描述：
### 
# 开发环境自定义的环境变量（命名必须以 VITE_ 开头）

## 后端接口公共路径（如果解决跨域问题采用反向代理就只需写公共路径）
VITE_BASE_API = '/api/v1'

## 路由模式 hash 或 html5
VITE_ROUTER_HISTORY = 'hash'

## 开发环境地址前缀（一般 '/'，'./' 都可以）
VITE_PUBLIC_PATH = '/'

## 接口地址
VITE_API_URL = 'http://192.168.xxx.xx'

就不一一文件展示了。

3.package.json中通过不同打包命令指定相应文件

  "scripts": {
    "dev": "vite  --mode development",
    "build:test": "vue-tsc --noEmit && vite build --mode staging",
    "build:prod": "vue-tsc --noEmit && vite build -- mode production",
    "lint:eslint": "eslint --cache --max-warnings 0 \"{src,tests,types}/**/*.{vue,js,jsx,ts,tsx}\" --fix",
    "lint:prettier": "prettier --write \"{src,tests,types}/**/*.{vue,js,jsx,ts,tsx,json,css,less,scss,html,md}\"",
    "prepare": "husky install",
    "test": "vitest"
  },

4.vite.config.ts中可以看到当前对应环境文件里所有信息

import { type ConfigEnv, type UserConfigExport, loadEnv } from "vite"
export default ({ mode }: ConfigEnv): UserConfigExport => {
    const viteEnv = loadEnv(mode, process.cwd()) 
    console.log(viteEnv,'当前环境');
}

5.运行中、、、可以在控制台看到输出结果

希望能帮助到你！！！