vue中打包生成可配置文件以便修改接口地址

vue打包上传到服务器之后,如果数据接口域名发生变化,需要手动修改接口地址,在发布的时候也麻烦,于是。。

在打包之后如果有一个json配置文件以便修改那不是方便很多

在网上找了一些方法貌似都是异步请求json文件,试过之后发现了问题:这个实际是需要在其他后端接口请求之前就返回接口地址。然后再进行其他一系列如登陆,获取用户信息等接口请求。

其实是需要同步操作的,在这个完成成功之后再进行其他一系列操作才对,于是乎,就想要不要试试promise等方法把异步变同步来进行操作?but,由于之前已经封装好了一系列接口,这样做的话实在太过麻烦,工程太大 。。

用 generate-asset-webpack-plugin生成json文件的方法也试过,发现还是行不通

后面经过折腾,绕了一个大圈,终于找到一个方法,又不用改配置文件,也不用修改已经封装好的axios请求方法。。用require来获取json文件的数据,成功!!!

为什么require可以呢?因为 require 是同步的。

由此,了解了下AMD,CMD等模块规范。

AMD是异步模块定义,CMD是同步模块定义,require.js应用AMD规范,sea.js应用CMD规范。

require.js和sea.js的差异:https://github.com/seajs/seajs/issues/277

由于之前webpack的配置是打包的时候会把static文件夹下面的文件copy过去,所以这里的config.json文件就放在static文件夹下面,打包之后就会打包过去。

config.json文件,这里配置一个接口地址

{"ApiUrl":"http://192.168.1.99:99"}

然后在用到这个接口地址的地方用require获取

axios.server.js  --- 之前已经封装了axios方法以及实际使用

具体见这篇博客:vue中封装axios方法

下面的代码只是其中很小的一部分(不全)

const serverconfig = require('../../static/serverconfig.json')

class myAxios{

  getUrl(url){
    return `${serverconfig.ApiUrl}${url}`;
  };

}

export default myAxios;

这样的话既不用改什么配置文件,又不用考虑同步异步问题,较为简单的实现了最初的目的----打包后的文件里有json文件以便以后接口地址变化频繁打包,手动修改

上一篇:linux系统中sed命令删除指定行后的下一行


下一篇:数据库.MongoDB.Java样例