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 相关文章推荐
extJs 文本框后面加上说明文字+下拉列表选中值后触发事件
Nov 27 Javascript
Javascript操作URL函数修改版
Nov 07 Javascript
jQuery中on()方法用法实例
Jan 19 Javascript
js实现iframe自动自适应高度的方法
Feb 17 Javascript
js实现仿Discuz文本框弹出层效果
Aug 13 Javascript
jQuery短信验证倒计时功能实现方法详解
May 25 Javascript
javascript原型链学习记录之继承实现方式分析
May 01 Javascript
解决Vue在Tomcat8下部署页面不加载的问题
Nov 12 Javascript
JS实现图片切换特效
Dec 23 Javascript
Vue中fragment.js使用方法小结
Feb 17 Javascript
JS实现滑动拼图验证功能完整示例
Mar 29 Javascript
Vuex中的Mutations的具体使用方法
Jun 01 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代码优化及php相关问题总结
2006/10/09 PHP
PHP 字符串分割和比较
2009/10/06 PHP
php empty()与isset()区别的详细介绍
2013/06/17 PHP
ucenter中词语过滤原理分析
2016/07/13 PHP
laravel框架之数据库查出来的对象实现转化为数组
2019/10/23 PHP
PHP ElasticSearch做搜索实例讲解
2020/02/05 PHP
jQuery Ajax 全解析
2009/02/08 Javascript
jquery 实现的全选和反选
2009/04/15 Javascript
Javascript Math对象
2009/08/13 Javascript
JavaScript 存在陷阱 删除某一区域所有节点
2010/05/10 Javascript
js获取input标签的输入值实现代码
2013/08/05 Javascript
JavaScript中调用函数的4种方式代码实例
2015/07/08 Javascript
jquery实现很酷的网页顶部图标下拉菜单效果
2015/08/22 Javascript
jQuery实现文本框邮箱输入自动补全效果
2015/11/17 Javascript
JavaScript中的闭包
2016/02/24 Javascript
jQuery animate和CSS3相结合实现缓动追逐效果附源码下载
2016/04/18 Javascript
JS基于正则截取替换特定字符之间字符串操作示例
2017/02/03 Javascript
jQuery插件HighCharts实现的2D堆条状图效果示例【附demo源码下载】
2017/03/14 Javascript
jquery图片放大镜效果
2017/06/23 jQuery
详解node服务器中打开html文件的两种方法
2017/09/18 Javascript
用Python的Flask框架结合MySQL写一个内存监控程序
2015/11/07 Python
详解Python给照片换底色(蓝底换红底)
2019/03/22 Python
python视频按帧截取图片工具
2019/07/23 Python
Python3并发写文件与Python对比
2019/11/20 Python
详解css3自定义滚动条样式写法
2017/12/25 HTML / CSS
丹尼尔惠灵顿手表天猫官方旗舰店:Daniel Wellington
2017/08/25 全球购物
澳大利亚购买太阳镜和眼镜网站:Glamoureyes
2020/09/22 全球购物
金融专业应届生求职信
2013/11/02 职场文书
大学生实习鉴定评语
2014/04/25 职场文书
安全生产大检查方案
2014/05/07 职场文书
咖啡店创业计划书
2014/08/15 职场文书
忠诚教育学习心得体会
2016/01/23 职场文书
七年级写作指导之游记作文
2019/10/07 职场文书
Html5新增了哪些功能
2021/04/16 HTML / CSS
微软Win11什么功能最惊艳? Windows11新功能特性汇总
2021/11/21 数码科技
图片批量处理 - 尺寸、格式、水印等
2022/03/07 杂记