时间:2021-05-26
写在前面
vue-cli 3.x 的beta版本已经发布了一段时间,很早就像体验一番一直找不到时间。这些日子刚好有空就想着依照网上的一些例子练下手,刚一上手就踩到坑了。
3.x 版本对整个项目的构建都有很大的改动,项目的默认配置整个都转移到CLI service里去了,从而所有的配置文件在初始化的项目中并没有生成。初次生成项目的时候可谓是完全懵的,无论是baidu还是google,对于3.x的介绍几乎就没有,仅有的一些也只是项目的一些生成流程,那怎么办,只能靠自己瞎整了。
既然没有现成的(作为一个伸手党我还是很自觉的承认了),那就只能去扒官方文档了,慢慢啃。这可就苦了我这个英语战斗力只有5的渣了,凭借着百度翻译和谷歌翻译,然后夹杂着自己的一些猜想,好歹是把基本的给整明白了一点点。
由于文笔实在太烂了,多余的废话就不说了,直接上干货。
跨域代理配置
由于3.x的默认配置都转移到了CLI service里,所以生成的项目中并没有配置项,我们如果需要自定义一些项目配置,则需要自己在项目的根目录(root)创建一个vue.config.js。vue.config.js里的配置项所有都是可选的,这就避免了我们去看一大堆不必要的默认配置,只需要配置自己需要的部分就行了。【官方文档】
由于baseUrl也是关联的部署目录,我们需求的仅仅是开发环境的变量,所以尽可能的我们不动baseUrl这个变量以免部署的时候出现问题。所以这里配置稍作修改。
需求上是我们只需要在开发环境配置跨域代理,所以我们可以在开发环境的配置上加上能够代理上的环境变量即可。官方提供了环境变量的配置方案。
在项目的根目录,我们创建一个.env.development文件来做开发环境的变量设置。
我们在.env.development文件下设置变量VUE_APP_BASE_API=/api即可将devServer的proxy重写的url赋值给VUE_APP_BASE_API,我们仅需在axios的封装方案上使用VUE_APP_BASE_API这个变量,就可以对应上devServer设置的变量。
// vue.config.jsmodule.exports = { // 修改的配置 // 将baseUrl: '/api',改为baseUrl: '/', baseUrl: '/', devServer: { proxy: { '/api': { target: 'http://www.example.org', changeOrigin: true, ws: true, pathRewrite: { '^/api': '' } } } }}// .env.developmentVUE_APP_BASE_API=/api这里依然是采用的http-proxy-middleware来做的代理配置,一些自定义配置可以移步到官网去进行参考。
后记
第一次写文档,之前都是伸手养成了懒得习惯,现在因没有可伸手的,就自己撸了,同时以此便利萌新以及也在踩坑的小伙伴。希望能帮到大家。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
使用vue-cli搭建的vue项目可以使用在项目内设置代理(proxyTable)的方式来解决跨域问题设置配置项的目录在config下的index.js,主要通
vue-cli中可以通过配置proxyTable解决开发环境的跨域问题,具体可以参考这篇文章:Vue-cliproxyTable解决开发环境的跨域问题如果后端接
网友问题:使用了vue-cli这个脚手架工具。在开发环境中如何配置跨域这个我懂。但是使用npmrunbuild后,里面所有的ajax的跨域请求url都变成了根目
前端开发时,请求后台接口经常需要跨域,vue-cli实现跨域请求只需要打开config/index.js,修改如下内容即可。//例如要请求的接口url为http
vue-cli3跨域配置:在vue-resource的数据请求中,一般我们会将请求方式GET/POST修改为jsonp的请求方式就可以实现跨域。但是对于只支持G