vue项目配置打包后可更改后台接口地址
介绍vue如何配置，能在打包后可以修改后端请求url而不必修改后再重新打包
·
之前一直在别人项目的基础上改bug，对于这些配置问题不是特别了解,最近需要自己写项目，把别人的配置照搬过来发现错误百出，想了想自己还是应该把这些问题搞懂，不然以后遇到了还是不会。下面是我总结的其他前辈的方法。
1、首先，在static文件夹下创建config文件夹，新建index.js文件，内容如下：
(function () {
window.SITE_CONFIG = {}
// api接口请求地址 这里写你后端要请求的接口地址
window.SITE_CONFIG['baseUrl'] = 'http://192.168.1.1:1111/simulation'
})()2、在index.html文件中引入index.js
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>tree</title>
<script src="./static/config/index.js"></script>
</head>
<body>
<div id="app"></div>
</body>
<script>
</script>
</html>
3、设置跨域代理，这里的代理只在开发环境下奏效，也就是你编写代码的过程中管用
proxyTable: {
// 设置代理
'/simulation':{
target: 'http://192.168.1.1:1111',//后台服务器地址
changeOrigin: true,//target为域名时必须设置此项,为true时允许跨域
secure: false,//设置支持 https 协议的代理
pathRewrite: {
'^/simulation': '/simulation',// 以/simulation开头的接口地址都会被替换为target中的地址
},
}
},4、在你要用到的地方判断当前是生产环境还是开发环境，然后决定是使用代理还是上面index.js里配置的全局的url
process.env.NODE_ENV === 'production' ? window.SITE_CONFIG.baseUrl : '/simulation'完成以上操作以后,打包后就算再频繁更改接口请求url也不用重新打包了。
总觉得哪里缺点什么，目前用着是没啥问题，以后可能会有其它问题出现，到时候再说吧
基于 Vue 的企业级 UI 组件库和中后台系统解决方案，为数万开发者服务。
更多推荐
2
0- 0
已为社区贡献4条内容
所有评论(0)