详解基于Vue

详解基于Vue

这段时间在折腾有vue做开发，之前也用过，但是大部分都是用一些简单的数据绑定。踏了很多坑，总结了一下，希望对刚刚开始折腾的小伙伴有帮助。

常见问题一：用vue-cli搭好环境以后，本地域名和测试环境的域名不一致，怎么跨域访问后台接口？

在config目录下找到index.js，在dev下添加如下:

proxyTable: {

'/api':{//指定以/api开头的接口都走代理

target:'https://yhhdtest.moguyun.com',//需要连接后台接口的域名

changeOrigin:true,//支持跨域

pathRewrite:{

'/api':''

}

}

},

以上的配置其实是dev-server 使用了非常强大的 http-proxy-middlewahttp://re 包。更多高级用法，请查阅其文档。

请求/api/getGame实际发出去的请求是 https://yhhdtest.moguyun.com/getGame

配置一个适用于本地和生产环境的后台请求

按照上面的配置好以后，本地环境可以成功的跨域和后台交互了。但是每个接口前面都要加一个原本不需要的/api前缀，这个其实和我们生产是不符合的。这个时候需要我们做一些配置，通过编译来区分。

在index.js下分别找到dev和prod（有的项目可能直接抽出来，单独成文件了）

dev.efNgbbENkgPnv.js

module.exports = merge(prodEnv, {

NODE_ENV: '"development"',

API_HOST:'"/api/"'

})

prod.env.js

module.exports = {

NODE_ENV: '"production"',

API_HOST:'""'

}

fNgbbENkgP

关键点在于API_HOST，这个时候我们的请求可以这么写

process.env.API_HOST+'/getGame'

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。