vue开发环境配置跨域的方法步骤


Posted in Javascript onJanuary 16, 2019

本文要实现的是:使用vue-cli搭建的项目在开发时配置跨域,上线后不做任何任何修改,接口也可以访问

production:产品 生产环境

development:开发 开发环境

1.开发环境设置跨域使用工具:

  • vue-cli自带的配置配置
  • 目录 /config/index.js

vue开发环境配置跨域的方法步骤

//自行复制黏贴
proxyTable: {
 '/apis':{
 target: 'http://10.1.63.26:19080/', // 后台api
 changeOrigin: true, //是否跨域
 // secure: true,
 pathRewrite: {
  '^/apis': '' //需要rewrite的,
 }
 }
}

注意:以上配置只有在生产环境下有效,你打包之后就不起作用了

这样就存在一个问题,你的接口都是/apis开头的,打包之后部署到服务器要去除/apis,才能正常访问后台接口,如何解决呢?

2.生产环境设置跨域

使用工具 axios 中文文档地址

思路

解决的思路是这样的:

首先,axios有一个baseURL的属性,配置了baseURL之后,你访问接口时就会自动带上

假设你vue-cli起了一个开发环境,地址为http://localhost:8080
//例1 当不设置baseURL时
axios.get('/user') //访问/user相当于访问 http://localhost:8080/user

//例2 
axios.baseURL='/apis'
axios.get('/user') //访问/user就相当于访问 http://localhost:8080/apis/user

//例3
axios.baseURL='https://sbsb.com'
axios.get('/user') //访问/user就相当于访问 https://sbsb.com/user

//例4
axios.baseURL='https://sbsb.com/apis'
axios.get('/user') //访问/user就相当于访问 https://sbsb.com/apis/user

然后我们要根据现在的环境是开发环境还是生产环境,配置不同的baseURL

//判断是否是生产环境
var isPro = process.env.NODE_ENV === 'production' //process.env.NODE_ENV用于区分是生产环境还是开发环境
//配置不同的baseURL
module.exports = {
 baseURL: isPro ? 'http://sbsb.com:8888/' : '/apis'
}

process.env.NODE_ENV用于区分是生产环境还是开发环境,这个值是webpack设置的

动手操作

假设后台api的rul是http://sbsb.com:8888/

首先在/config目录下新建一个文件,我这里叫api.config.js

写入以下代码

//判断是否是生产环境
var isPro = process.env.NODE_ENV === 'production' //process.env.NODE_ENV用于区分是生产环境还是开发环境
//根据环境不同导出不同的baseURL
module.exports = {
 baseURL: isPro ? 'http://sbsb.com:8888/' : '/apis'
}

然后,在main.js中引入axios和刚才那个文件

//main.js
import Vue from 'vue'
import axios from 'axios'
import apiConfig from '../config/api.config.js'
axios.baseURL=apiConfig.baseURL
//axios的其他配置...

这样配置之后,打包部署到服务器上也不用再手工去除/apis

如果配置过程中出现了问题,自己调试,看看访问的url正不正确

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

Javascript 相关文章推荐
浅析jquery的js图表组件highcharts
Mar 06 Javascript
纯js和css实现渐变色包括静态渐变和动态渐变
May 29 Javascript
jquery ztree实现模糊搜索功能
Feb 25 Javascript
JS常用函数和常用技巧小结
Oct 15 Javascript
微信小程序 生命周期和页面的生命周期详细介绍
Jan 19 Javascript
JavaScript利用fetch实现异步请求的方法实例
Jul 26 Javascript
深入理解Vue transition源码分析
Jul 30 Javascript
jQuery+SpringMVC中的复选框选择与传值实例
Jan 08 jQuery
jQuery中将json数据显示到页面表格的方法
May 27 jQuery
如何在js代码中消灭for循环实例详解
Jul 29 Javascript
vue移动端弹框组件的实例
Sep 25 Javascript
详解vue页面首次加载缓慢原因及解决方案
Nov 06 Javascript
微信小程序出现wx.getLocation再次授权问题的解决方法分析
Jan 16 #Javascript
在Create React App中启用Sass和Less的方法示例
Jan 16 #Javascript
在Create React App中使用CSS Modules的方法示例
Jan 15 #Javascript
Vue 样式绑定的实现方法
Jan 15 #Javascript
在vue使用clipboard.js进行一键复制文本的实现示例
Jan 15 #Javascript
2019 年编写现代 JavaScript 代码的5个小技巧(小结)
Jan 15 #Javascript
mock.js实现模拟生成假数据功能示例
Jan 15 #Javascript
You might like
用PHP动态生成虚拟现实VRML网页
2006/10/09 PHP
linux下为php添加curl扩展的方法
2011/07/29 PHP
php中使用PHPExcel读写excel(xls)文件的方法
2014/09/15 PHP
PHP多线程之内部多线程实例分析
2015/03/09 PHP
PHP 反射(Reflection)使用实例
2015/05/12 PHP
Zend Framework基本页面布局分析
2016/03/19 PHP
PHP笛卡尔积实现算法示例
2018/07/30 PHP
PHP解析url并得到url参数方法总结
2018/10/11 PHP
PHP获取远程http或ftp文件的md5值的方法
2019/04/15 PHP
html下载本地
2006/06/19 Javascript
限制文本字节数js代码
2007/03/06 Javascript
javascript 树控件 比较好用
2009/06/11 Javascript
js cookies实现简单统计访问次数
2009/11/24 Javascript
JQuery+CSS实现图片上放置按钮的方法
2015/05/29 Javascript
JS实现淡蓝色简洁竖向Tab点击切换效果
2015/10/06 Javascript
巧用canvas
2017/01/21 Javascript
JS通过调用微信API实现微信支付功能的方法示例
2017/06/29 Javascript
JavaScript实现body内任意节点的自定义属性功能示例
2017/09/18 Javascript
vue的注意规范之v-if 与 v-for 一起使用教程
2019/08/04 Javascript
如何使用proxy实现一个简单完整的MVVM库的示例代码
2019/09/17 Javascript
vue-cli2与vue-cli3在一台电脑共存的实现方法
2019/09/25 Javascript
[34:27]DOTA2上海特级锦标赛B组败者赛 VG VS Spirit第一局
2016/02/26 DOTA
python自定义函数实现一个数的三次方计算方法
2019/01/20 Python
在cmd中查看python的安装路径方法
2019/07/03 Python
完美解决keras保存好的model不能成功加载问题
2020/06/11 Python
Python实现一个简单的递归下降分析器
2020/08/01 Python
ManoMano英国:欧洲第一家专注于DIY和园艺市场的电商平台
2020/03/12 全球购物
UNOde50美国官网:西班牙珠宝品牌
2020/08/15 全球购物
C++:memset ,memcpy和strcpy的根本区别
2013/04/27 面试题
秋季运动会加油稿200字
2014/01/11 职场文书
读群众路线的心得体会
2014/09/03 职场文书
先进党支部事迹材料
2014/12/24 职场文书
天那边观后感
2015/06/09 职场文书
实验室安全管理制度
2015/08/05 职场文书
合同补充协议书
2016/03/24 职场文书
创业计划书之青年旅馆
2019/09/23 职场文书