请问vite如何配置环境变量指向一个对象

Question

我现在在生产环境中是这样请求的

window.musicApi.getData()

我需要在开发环境中这样请求

MusicApi.getData()

我在.env.development文件中这样配置

import MusicApi from './env.musicapi.development.ts'
VITE_MUSIC_API = MusicApi

在'./env.musicapi.development.ts'中定义MusicApi

const MusicApi = {
  getLists: (limit: number) => {
    return fetch(`http://localhost:3000/top/playlist?limit=${limit}`);
  },
};
export default MusicApi;

在vue文件中这样请求

import.meta.env.VITE_MUSIC_API.getData()

但是import.meta.env.VITE_MUSIC_API指向的是字符串"MusicApi"
报错提示MusicApi上找不到方法getData
由于请求比较复杂,不能用替代请求路径字符串的办法来配置
我需要在MusicApi对象的getData方法中重写请求
请问我该如何配置在开发环境中VITE_MUSIC_API指向对象MusicApi,生产环境中VITE_MUSIC_API指向对象window.musicApi

Answer 1

你在开发环境直接把MusicApi注入到window.musicApi可以不?

import MusicApi from './env.musicapi.development.ts
if(import.meta.env.DEV){
VITE_MUSIC_API= MusicApi
}