doubleyong
管理员
管理员
  • 最后登录2020-12-01
  • 发帖数938
  • 最爱沙发
  • 喜欢达人
  • 原创写手
  • 社区居民
  • 忠实会员
阅读:481回复:0

[vue]vue提供打包后的config配置文件

楼主#
更多 发布于:2020-07-10 15:36
用vue-cli构建的项目通常是采用前后端分离的开发模式,也就是前端与后台完全分离,此时就需要将后台接口地址打包进项目中,此时如果只是改个接口地址也要重新打包那就太麻烦了,解决方法是直接加个config.js文件
1.首先我们在public文件下建立一个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, // api的base_url
  timeout: 5000 // 请求超时时间
})
4.最后在打包成功之后,config,js文件不会被打包,依然存在public文件夹下,如果需要修改只需要用记事本打开文件修改地址就OK了,而且该方法也不会影响开发模式。

转自:https://blog.csdn.net/weixin_34018169/article/details/92397305
知识需要管理,知识需要分享
游客


返回顶部

公众号

公众号