05_Vite+Vue3不同的环境配置不同的后端API接口

需求：项目有开发环境，测试环境，生产环境，不同的环境配置不同域名下的API接口

1.创建3个配件文件

\src\env\.env.dev

#开发环境配置
VITE_BASE_URL="https://localhost:7210/api"

\src\env\.env.sit

#本地联调的配置
VITE_BASE_URL="https://localhost:7211/api"

\src\env\.env.prod

#npm run build 使用的配置
#生产环境的配置
#访问的是相对路径
VITE_BASE_URL="./api"

 

2.vite.config.js配置修改

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  envDir:'./src/env' //指定配置文件目录
})

 

3.package.json 配置文件修改

{
  "name": "demo01",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite --mode dev",
    "sit": "vite --mode sit",
    "build": "vite build --mode prod",
    "preview": "vite preview"
  },
  "dependencies": {
    "@element-plus/icons-vue": "^2.3.1",
    "axios": "^1.7.2",
    "element-plus": "^2.7.6",
    "less": "^4.2.0",
    "pinia": "^2.1.7",
    "vue": "^3.4.29",
    "vue-router": "^4.4.0"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^5.0.5",
    "vite": "^5.3.1"
  }
}

 

4.自定义的接口配置文件

//放置项目的配置信息
//获取所有的环境变量
console.log("获取所有的环境变量",import.meta.env)
const ApiUrl=import.meta.env.VITE_BASE_URL;
export const API_Config={
   LoginApi:`${ApiUrl}/User/Login`,

   UserListApi:`${ApiUrl}/User/List`,
   UserAddApi:`${ApiUrl}/User/Add`,
   UserUpdateApi:`${ApiUrl}/User/Update`,
   UserDeleteApi:`${ApiUrl}/User/Delete`,

   UserLogoutAPi:`${ApiUrl}/User/Logout`
}

//全局不可变配置
export const CONFIG={
    Token_Name:"Authorization"
}

测试下.................

npm run dev 

npm run sit