需求

有这样一个需求：项目线上的接口地址是经常会变化的，后端希望接口地址放在一个配置文件如config.js中，这个文件不能被打包压缩，从而后端能任意修改接口地址，这样就不用让前端重新打包了
个人实践，总结了两种方案：

方案一

index.html

新增script标签，window对象上挂载请求路径，后端想修改接口地址在html中修改即可

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>
  </head>
  <body>
    // 新增，放在上面，避免js执行顺序问题
    <script>
      window.httpurl = "http://192.168.1.236:10007/"
    </script>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>

axios

设置请求路径为window.httpurl

const instance = axios.create({
  ...
  baseURL: window.httpurl  
})

方案二

index.html

新增<script src="./config.js"></script>，放在上面，避免js执行顺序问题，vite只会打包type="module"的script标签

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    // 新增
    <script src="./config.js"></script>
    <title>Vite App</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>

config.js

新建config.js，直接放在public目录下，内容如下

window.httpurl = "http://192.168.1.236:10007/"

axios

设置请求路径为window.httpurl

const instance = axios.create({
  ...
  baseURL: window.httpurl  
})
# 前端 # javascript # html
Logo
技术共进，成长同行——讯飞AI开发者社区

技术共进，成长同行——讯飞AI开发者社区

更多推荐

cover

【编程语言】主要的面向对象开发语言

avatar 讯飞AI开发者社区

AI代码生成对CRUD流程的重构：Copilot在全栈开发中的渗透率分析

随着人工智能（AI）技术的迅速发展，尤其是在编程领域的应用，AI代码生成工具如GitHub Copilot已经成为了全栈开发者的重要助手。通过分析Copilot在CRUD（创建、读取、更新、删除）流程中的应用，本文旨在探索AI如何提升开发效率，同时分析其对开发流程的深远影响。??

avatar 讯飞AI开发者社区
cover

【编程语言】程序序设计语言中的OOP机制

avatar 讯飞AI开发者社区