zoukankan      html  css  js  c++  java
  • webpack+vue打包之后输出配置文件修改接口文件

    原文地址:https://blog.csdn.net/xiaojun_yuan/article/details/79460484

    用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)

    <script type="text/javascript" src="/static/config.js"></script>

    3.然后你就可以在你需要的地方随意获取就行了,比如

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

    4.最后在打包成功之后,config,js文件不会被打包,依然存在static文件夹下,如果需要修改只需要用记事本打开文件修改地址就OK了,而且该方法也不会影响开发模式,是不是很简单有效呢,快去尝试一下吧

  • 相关阅读:
    开启 clr enabled
    索引查看
    nginx 安装
    mysql中int(10)与int(11)有什么区别吗?
    1.安卓开发基础1~6笔记
    Vue项目搭建基础之Vue-cli模版测试
    alert执行顺序
    介绍call和apply
    a链接易混淆与form表单简易验证用法详解
    js正则知识点
  • 原文地址:https://www.cnblogs.com/luyuefeng/p/8890739.html
Copyright © 2011-2022 走看看