Vue项目打包后动态修改IP地址

说明

最近项目需要在多个地方部署，IP地址地址不是固定的。就需要每次修改IP地址，然后再打包，然后把打包后的文件给后端，比较的繁琐

需求

现在后端需要，只用修改一个文件里的变量，就可以修改前端文件的IP地址

实现方法

目前网上方法还挺多了，测试了一个比较简单方便的方法，也不用额外装插件或者包，目前已测试成功

第一步 在public目录下，新建config.js

(function () {
    const config = {
        baseURL: '你想要设置的IP地址'
    }

    window.config = config
})()

第二步 引入这个config.js

在index.html的head标签中，写入以下代码

<script src="<%= BASE_URL %>config.js"></script>

第三步 配置axios基地址

在axios的配置文件中配置基地址 首先判断当前是否是生产环境，如果是生产环境，则设置基地址为config.js里配置的地址，否则还是读取原先的地址

const isProd = process.env.NODE_ENV === 'production'

let baseURL = ''
if (isProd) {
    baseURL = window.config.baseURL
} else {
    baseURL = process.env.VUE_APP_BASE_API
}
const service = axios.create({
    baseURL,
    timeout: 10000
})