vue-cli 3.x配置跨域代理的实现方法


Posted in Javascript onApril 12, 2019

写在前面

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.js
module.exports = {
  // 修改的配置
  // 将baseUrl: '/api',改为baseUrl: '/',
  baseUrl: '/',
  devServer: {
    proxy: {
      '/api': {
        target: 'http://www.example.org',
        changeOrigin: true,
        ws: true,
        pathRewrite: {
         '^/api': ''
        }
      }
    }
  }
}
// .env.development
VUE_APP_BASE_API=/api

这里依然是采用的http-proxy-middleware来做的代理配置,一些自定义配置可以移步到官网去进行参考。

后记

第一次写文档,之前都是伸手养成了懒得习惯,现在因没有可伸手的,就自己撸了,同时以此便利萌新以及也在踩坑的小伙伴。希望能帮到大家。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
浅析js中2个等号与3个等号的区别
Aug 06 Javascript
js控制table合并具体实现
Feb 20 Javascript
javascript window.open打开新窗口后无法再次打开该窗口问题的解决方法
Apr 12 Javascript
JavaScript实现向OL列表内动态添加LI元素的方法
Mar 21 Javascript
浅析jquery与checkbox的checked属性的问题
Apr 27 Javascript
slideToggle+slideup实现手机端折叠菜单效果
May 25 Javascript
JavaScript 用fetch 实现异步下载文件功能
Jul 21 Javascript
vue 集成jTopo 处理方法
Aug 07 Javascript
layer的prompt弹出框,点击回车,触发确定事件的方法
Sep 06 Javascript
jQuery实现的移动端图片缩放功能组件示例
May 01 jQuery
如何利用javascript接收json信息并进行处理
Aug 06 Javascript
原生JS实现多条件筛选
Aug 19 Javascript
解决微信小程序调用moveToLocation失效问题【超简单】
Apr 12 #Javascript
详解Bootstrap 学习(一)入门
Apr 12 #Javascript
vue组件中iview的modal组件爬坑问题之modal的显示与否应该是使用v-show
Apr 12 #Javascript
vue+echarts实现可拖动节点的折线图(支持拖动方向和上下限的设置)
Apr 12 #Javascript
详解Vue中使用插槽(slot)、聚类插槽
Apr 12 #Javascript
JS实现li标签的删除
Apr 12 #Javascript
vue中多路由表头吸顶实现的几种布局方式
Apr 12 #Javascript
You might like
php生成xml简单实例代码
2009/12/16 PHP
《PHP编程最快明白》第五讲:php目录、文件操作
2010/11/01 PHP
php操作redis数据库常见方法实例总结
2020/02/20 PHP
jquery下异步提交表单 异步跨域提交表单
2010/11/17 Javascript
jQuery结合PHP+MySQL实现二级联动下拉列表[实例]
2011/11/15 Javascript
解决火狐浏览器下JS setTimeout函数不兼容失效不执行的方法
2012/11/14 Javascript
jQuery取id有.的值的方法
2014/05/21 Javascript
JavaScript中字符串与Unicode编码互相转换的实现方法
2015/12/18 Javascript
Eclipse编辑jsp、js文件时卡死现象的解决办法汇总
2016/02/02 Javascript
使用jquery.form.js实现图片上传的方法
2016/05/05 Javascript
js基本算法:冒泡排序,二分查找的简单实例
2016/10/08 Javascript
探讨AngularJs中ui.route的简单应用
2016/11/16 Javascript
Angular2学习笔记——详解NgModule模块
2016/12/02 Javascript
three.js绘制地球、飞机与轨迹的效果示例
2017/02/28 Javascript
用javascript获取任意颜色的更亮或更暗颜色值示例代码
2017/07/21 Javascript
webpack配置sass模块的加载的方法
2017/07/30 Javascript
canvas基础绘制-绚丽倒计时的实例
2017/09/17 Javascript
使用classList来实现两个按钮样式的切换方法
2018/01/24 Javascript
MUI 实现侧滑菜单及其主体部分上下滑动的方法
2018/01/25 Javascript
小程序实现分类页
2019/07/12 Javascript
Python实例分享:快速查找出被挂马的文件
2014/06/08 Python
python发送邮件脚本
2018/05/22 Python
PyQt5 QTableView设置某一列不可编辑的方法
2019/06/25 Python
python多进程下实现日志记录按时间分割
2019/07/22 Python
python使用matplotlib绘制雷达图
2019/10/18 Python
Python 一行代码能实现丧心病狂的功能
2020/01/18 Python
Python3 selenium 实现QQ群接龙自动化功能
2020/04/17 Python
如何在windows下安装配置python工具Ulipad
2020/10/27 Python
HTML5给汉字加拼音收起展开组件的实现代码
2020/04/08 HTML / CSS
俄罗斯购买内衣网站:Trusiki
2020/08/22 全球购物
民族团结好少年事迹材料
2014/08/19 职场文书
企业授权委托书范本
2014/09/22 职场文书
小学副班长竞选稿
2015/11/21 职场文书
《酸的和甜的》教学反思
2016/02/18 职场文书
Python入门之基础语法详解
2021/05/11 Python
sql字段解析器的实现示例
2021/06/23 SQL Server