vue打包后修改接口地址(私有化部署)

私有化部署

应用场景

1.客户对于软件交付物需要自己部署数据库和站点的情况。

2.一套软件通过修改某文件的方式(较低成本的更改)，以达到调换接口的目的。

解决方案

在vue项目中public文件夹下新增serverConfig.js文件夹

(function (window){window.$config = {// BASE_API: 'http://yyyyyyyyyyyy', BASE_API: 'https://xxxxxxxxxxxxx', }})(window)

index.html中

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

具体调用接口处，这里使用了

this.$axios.get(window.$config.BASE_API)

原理：在public中 build不会改变文件。而最终采用直接引入脚本的方式加入到index.html

通过全局变量window.$config.BASE_API访问接口。

打包后的dist文件

以此可以直接通过修改serverConfig.js中的BASE_API来改变接口地址。