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

572 阅读1分钟

说明

最近项目需要在多个地方部署,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
})