axios 生产环境和开发环境 ip 切换（修改文件配置）

Posted 2020-12-15 风中的沙~~

前言

往往在开发过程中，前端axios 连接的ip 地址 是内部服务器，甚至不止一个，可能有多个，那么在封装axios 工具的时候我们通常用这种方式

const axiosbaseurl = process.env.NODE_ENV===‘development‘ ? ‘http://192.168.2.125:8890‘:‘http://192.168.2.126:8890‘

const  requsturlone  = process.env.NODE_ENV===‘development‘ ? ‘http://192.168.2.125:8891‘:‘http://192.168.2.126:8892‘

总之前端一个工程中要连接多少个app 就写多少行配置，那么开发环境切换到生产环境 后 ，我们需要把内部ip 换成 生产环境ip，所做的就是在源码里将上述的地址改成需要的ip 编译部署，个人觉得这样不太适合。日后的自动化运维部署，并且动源码总是感觉不太好，于是想将相关的配置文件写到config.js 中，通过手动修改config.js 中内容直接可以更改url ,这样不用我每次动源码再去编译了

---

 

正题 ：

于是乎我在模块里引入外部config.js 

import {ip,port} from "../public/static/config.js"

这么看很合理，开发环境中那个，我修改config.js 中的ip  axios 请求url 也相应改变，但是当我 build 后，再在config.js 里修改相关ip port 时 axios 始终以修改前的ip 和port 为地址，根本不变化，这里深层次的原因没有弄明白，大致总结了下，应该时webpack 在编译的时候就已经将config.js 内容编译到代码中了，当我们在浏览器中加载前端js ,   js 并没有动态的从相关文件中寻找。这里我去看了下 import 和 require 的引用机制，换成 require 引入，require是运行时加载，但还是不行，问题应该是出在了webpack 这里。

换种思路方法；

---

 

通过在 index.html 中 script 引入静态文件，将文件内容挂载到window 对象上，那么在我的axios 模块中就可以通过window 动态的加载config.js 中的内容了。

    <script type="text/javascript" src="/static/ipconfig.js"></script>

 

axios 引入 

const ipconfig = window.$ipconfig

解决问题。。。