用vue-cli构建的项目通常是采用前后端分离的开发模式,也就是前端与后台完全分离,此时就需要将后台接口地址打包进项目中,此时如果只是改个接口地址也要重新打包那就太麻烦了,解决方法是直接加个config.js文件
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, // api的base_urltimeout: 5000 // 请求超时时间})
4.最后在打包成功之后,config,js文件不会被打包,依然存在static文件夹下,如果需要修改只需要用记事本打开文件修改地址就OK了,而且该方法也不会影响开发模式。
如果觉得《vue打包后分离config配置文件》对你有帮助,请点赞、收藏,并留下你的观点哦!