-
在本地开发
Vue
的时候,我们可以通过vue.config.js
配置devServer
。 -
其实服务器那边都是有配置代理的,只是我们本地平常不是特殊情况只需要通过
vue.config.js
配置devServer
即可。 -
但是当我们需要
原生 html
嵌入Vue
的时候或者我们不通过vue.config.js
配置devServer
的时候,我们就需要安装一下本地Nginx
配置代理了。 -
下载安装 Nginx 安装之后,启动
Nginx
,然后找到nginx.conf
,在我们配置的虚拟主机里面添加代理proxy_pass
。 -
nginx.conf
,添加代理之后,$ nginx -s reload
刷新配置。server { # 监听端口 listen 8080; # 主机名称 server_name localhost; # 根目录 root /usr/local/var/dzm; # 匹配协议 location / { index index.html; } // 监听包含 /api/ 的链接 location /api/ { // 匹配到后转发到这个域名地址 proxy_pass http://api.test.com/; } }
-
Vue 代码中使用
// Vue 生命周期方法 mounted () { axios({ url: 'http://localhost:8080/api/union/center/pageinfo', method: 'get', headers: { 'X-Token': 'slnZOg9VrV8Xo8i5IVudlvRLgmBBlzUTNRMIn6f5EqbkFVnkPmMOJJf1pjN9' } }) .then(res => { console.log(res) }) .catch(err => { console.error(err) }) }
当然在使用
axios
的时候可以封装一下,将前面http://localhost:8080
封装成baseURL
,将headers
封装到公共配置里面。但是需要注意的就是
/api/
这一段一定要跟着url
走,不要将它也配置到公用的baseURL
里面去,不然会请求失败。相当于
url: '/api/union/center/pageinfo'
,axios
的公用baseURL: 'http://localhost:8080'
,这样配置即可。
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用?
- 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了?
- 找不到素材资源介绍文章里的示例图片?
- 模板不会安装或需要功能定制以及二次开发?
发表评论
还没有评论,快来抢沙发吧!