正文

webpack+vue打包之后输出配置文件修改接口文件

IP云
IP云V管理员/8 阅读
06/27
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

用vue-cli构建的项目通常是采用前后端分离的开发模式，也就是前端与后台完全分离，此时就需要将后台接口地址打包进项目中，but，难道我们只是改个接口地址也要重新打包吗？当然不行了，那就太麻烦了，怎么解决呢？其实方法很多，接下来我推荐一种最便捷的方法，也是最容易操作的方法。

1.首先我们在static文件下建立一个js文件，就叫config.js吧，内容为

window.g = {
AXIOS_TIMEOUT: 10000,
ApiUrl: 'http://localhost:21021/api/services/app', // 配置服务器地址,
ParentPage: {
CrossDomainProxyUrl: '/Home/CrossDomainProxy',
BtnsApi: '/api/services/app/Authorization/GetBtns',
OrgsApi: '/api/services/app/authorization/GetOrgsByUserId'
},
}

2.接下来我们只需要在index.html这个入口文件里引入该文件（注意路径就ok）

 
  1. <script type="text/javascript" src="/static/config.js"></script>
     
    3.然后你就可以在你需要的地方随意获取就行了，比如

    var baseURLStr = window.g.ApiUrl
    // 创建axios实例
    const service = axios.create({
    baseURL: baseURLStr, // api的base_url
    timeout: 5000 // 请求超时时间
    })