vue3 vite打包后动态修改打包后的请求路径，无需打多个包给后端

整体思路和需求

部署多个服务器环境的时候，需要多次打包很麻烦，所以需要打包之后动态的修改

1.创建一个webconfig文件夹

2.在自己封装的接口文件中

判断是否在生产环境，然后将数据保存到vuex 中

代码：

// 创建axios服务的函数  

const createService = (baseURL:any) => {  

  return axios.create({  

    timeout: 20000,  // 超时配置  

    withCredentials: true,  

    baseURL,  // 请求地址

  });  

};  

 

let service;  

if (import.meta.env.MODE === 'production') {  

  service = createService(window.httpurl);  

  store.dispatch('SetWebSiteTitle_routeUrl', window.httpurl);

} else {  

  service = createService(import.meta.env.VITE_API_DOMAIN);  

  store.dispatch('SetWebSiteTitle_routeUrl', import.meta.env.VITE_API_DOMAIN);

}  

3.在index.html中引入 webconfig

这个地方要注意

正常打包之后引入路径是./webconfig.js，但是不知道为什么在部署服务器之后，刷新页面之后会获取不到window.httpurl，最后找了试了很多次，将地址修改为   <script  src="/webconfig.js"></script>   就可以了

  <script  src="/webconfig.js"></script>

具体的原因不知道，有没有大佬知道分享一下