之前一直在别人项目的基础上改bug，对于这些配置问题不是特别了解,最近需要自己写项目，把别人的配置照搬过来发现错误百出，想了想自己还是应该把这些问题搞懂，不然以后遇到了还是不会。下面是我总结的其他前辈的方法。
1、首先，在static文件夹下创建config文件夹，新建index.js文件，内容如下：
复制代码
1
2
3
4
5
6
7
8(function () { window.SITE_CONFIG = {} // api接口请求地址 这里写你后端要请求的接口地址 window.SITE_CONFIG['baseUrl'] = 'http://192.168.1.1:1111/simulation' })()
2、在index.html文件中引入index.js
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15<!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、设置跨域代理，这里的代理只在开发环境下奏效，也就是你编写代码的过程中管用
复制代码
1
2
3
4
5
6
7
8
9
10
11proxyTable: { // 设置代理 '/simulation':{ target: 'http://192.168.1.1:1111',//后台服务器地址 changeOrigin: true,//target为域名时必须设置此项,为true时允许跨域 secure: false,//设置支持 https 协议的代理 pathRewrite: { '^/simulation': '/simulation',// 以/simulation开头的接口地址都会被替换为target中的地址 }, } },
4、在你要用到的地方判断当前是生产环境还是开发环境，然后决定是使用代理还是上面index.js里配置的全局的url
复制代码
1process.env.NODE_ENV === 'production' ? window.SITE_CONFIG.baseUrl : '/simulation'
完成以上操作以后,打包后就算再频繁更改接口请求url也不用重新打包了。
总觉得哪里缺点什么，目前用着是没啥问题，以后可能会有其它问题出现，到时候再说吧
最后
以上就是欢呼睫毛膏最近收集整理的关于vue项目配置打包后可更改后台接口地址的全部内容，更多相关vue项目配置打包后可更改后台接口地址内容请搜索靠谱客的其他文章。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复